diff options
Diffstat (limited to 'files/ru')
67 files changed, 493 insertions, 414 deletions
diff --git a/files/ru/_redirects.txt b/files/ru/_redirects.txt index 619625d281..8dbb1dd636 100644 --- a/files/ru/_redirects.txt +++ b/files/ru/_redirects.txt @@ -365,9 +365,16 @@ /ru/docs/Web/API/WebRTC_API/протоколы /ru/docs/Web/API/WebRTC_API/Protocols /ru/docs/Web/API/WebRTC_API/связь /ru/docs/Web/API/WebRTC_API/Connectivity /ru/docs/Web/API/WindowBase64/Base64_encoding_and_decoding /ru/docs/Glossary/Base64 -/ru/docs/Web/API/WindowBase64/btoa /ru/docs/Web/API/WindowOrWorkerGlobalScope/btoa -/ru/docs/Web/API/WindowTimers.setTimeout /ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout -/ru/docs/Web/API/WindowTimers/setTimeout /ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout +/ru/docs/Web/API/WindowBase64/btoa /ru/docs/Web/API/btoa +/ru/docs/Web/API/WindowOrWorkerGlobalScope/atob /ru/docs/Web/API/atob +/ru/docs/Web/API/WindowOrWorkerGlobalScope/btoa /ru/docs/Web/API/btoa +/ru/docs/Web/API/WindowOrWorkerGlobalScope/caches /ru/docs/Web/API/caches +/ru/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /ru/docs/Web/API/clearTimeout +/ru/docs/Web/API/WindowOrWorkerGlobalScope/fetch /ru/docs/Web/API/fetch +/ru/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /ru/docs/Web/API/setInterval +/ru/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /ru/docs/Web/API/setTimeout +/ru/docs/Web/API/WindowTimers.setTimeout /ru/docs/Web/API/setTimeout +/ru/docs/Web/API/WindowTimers/setTimeout /ru/docs/Web/API/setTimeout /ru/docs/Web/API/console.timeEnd /ru/docs/Web/API/Console/timeEnd /ru/docs/Web/API/document.activeElement /ru/docs/Web/API/Document/activeElement /ru/docs/Web/API/document.createComment /ru/docs/Web/API/Document/createComment @@ -383,10 +390,13 @@ /ru/docs/Web/CSS/Adjacent_sibling_selectors /ru/docs/Web/CSS/Adjacent_sibling_combinator /ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy /ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations /ru/docs/Web/CSS/CSS_Background_and_Borders /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders -/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор /ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-image_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Border-radius_генератор /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator +/ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds /ru/docs/Web/CSS/CSS_Basic_User_Interface/Использование_URL_значений_для_свойства_cursor /ru/docs/Web/CSS/CSS_Basic_User_Interface/Using_URL_values_for_the_cursor_property -/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /ru/docs/Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +/ru/docs/Web/CSS/CSS_Box_Model/Box-shadow_generator /ru/docs/Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator /ru/docs/Web/CSS/CSS_Colors /ru/docs/Web/CSS/CSS_Color /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элементов_в_Flex_контейнере /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Контролирование_соотношения_элементов_вдоль_главной_оси /ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Controlling_Ratios_of_Flex_Items_Along_the_Main_Ax diff --git a/files/ru/_wikihistory.json b/files/ru/_wikihistory.json index 43fa9641e5..633ebd6995 100644 --- a/files/ru/_wikihistory.json +++ b/files/ru/_wikihistory.json @@ -11658,62 +11658,6 @@ "kenrick95" ] }, - "Web/API/WindowOrWorkerGlobalScope/atob": { - "modified": "2019-03-23T22:02:40.728Z", - "contributors": [ - "HawkeyePierce89", - "hunty" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/btoa": { - "modified": "2019-09-17T16:11:11.862Z", - "contributors": [ - "SerzN1", - "uleming" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/caches": { - "modified": "2020-10-29T09:02:45.566Z", - "contributors": [ - "ScratchFilin", - "evilwithin93rus" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/clearTimeout": { - "modified": "2020-10-15T22:33:31.469Z", - "contributors": [ - "andzion105" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/fetch": { - "modified": "2020-10-15T22:06:28.491Z", - "contributors": [ - "BadLame", - "dasha_hshr" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/setInterval": { - "modified": "2020-11-18T12:13:20.493Z", - "contributors": [ - "kosarev_va", - "WhiteApfel", - "lilka9", - "AliaksandrZahorski" - ] - }, - "Web/API/WindowOrWorkerGlobalScope/setTimeout": { - "modified": "2020-11-18T12:03:29.649Z", - "contributors": [ - "kosarev_va", - "YozhEzhi", - "AliaksandrZahorski", - "akaguny", - "marat-curious", - "neustroev.artyom", - "fscholz", - "ichent" - ] - }, "Web/API/Worker": { "modified": "2019-03-23T22:47:25.398Z", "contributors": [ @@ -11959,6 +11903,40 @@ "t1gor" ] }, + "Web/API/atob": { + "modified": "2019-03-23T22:02:40.728Z", + "contributors": [ + "HawkeyePierce89", + "hunty" + ] + }, + "Web/API/btoa": { + "modified": "2019-09-17T16:11:11.862Z", + "contributors": [ + "SerzN1", + "uleming" + ] + }, + "Web/API/caches": { + "modified": "2020-10-29T09:02:45.566Z", + "contributors": [ + "ScratchFilin", + "evilwithin93rus" + ] + }, + "Web/API/clearTimeout": { + "modified": "2020-10-15T22:33:31.469Z", + "contributors": [ + "andzion105" + ] + }, + "Web/API/fetch": { + "modified": "2020-10-15T22:06:28.491Z", + "contributors": [ + "BadLame", + "dasha_hshr" + ] + }, "Web/API/notification": { "modified": "2019-03-23T22:43:07.772Z", "contributors": [ @@ -11969,6 +11947,28 @@ "fsanano" ] }, + "Web/API/setInterval": { + "modified": "2020-11-18T12:13:20.493Z", + "contributors": [ + "kosarev_va", + "WhiteApfel", + "lilka9", + "AliaksandrZahorski" + ] + }, + "Web/API/setTimeout": { + "modified": "2020-11-18T12:03:29.649Z", + "contributors": [ + "kosarev_va", + "YozhEzhi", + "AliaksandrZahorski", + "akaguny", + "marat-curious", + "neustroev.artyom", + "fscholz", + "ichent" + ] + }, "Web/API/window/requestAnimationFrame": { "modified": "2020-10-15T21:21:09.538Z", "contributors": [ @@ -12741,30 +12741,30 @@ "ukarim" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-image_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders": { + "modified": "2019-03-23T22:40:44.971Z", + "contributors": [ + "teoli" + ] + }, + "Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator": { "modified": "2019-03-23T22:25:50.600Z", "contributors": [ "BychekRU" ] }, - "Web/CSS/CSS_Background_and_Borders/Border-radius_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator": { "modified": "2019-03-23T22:40:49.075Z", "contributors": [ "vito_falcone" ] }, - "Web/CSS/CSS_Background_and_Borders/Box-shadow_generator": { + "Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator": { "modified": "2019-03-18T20:43:50.074Z", "contributors": [ "BychekRU" ] }, - "Web/CSS/CSS_Backgrounds_and_Borders": { - "modified": "2019-03-23T22:40:44.971Z", - "contributors": [ - "teoli" - ] - }, "Web/CSS/CSS_Backgrounds_and_Borders/Using_multiple_backgrounds": { "modified": "2019-03-23T22:13:04.810Z", "contributors": [ diff --git a/files/ru/glossary/accessibility_tree/index.html b/files/ru/glossary/accessibility_tree/index.html index 6f530f1449..ed2039245d 100644 --- a/files/ru/glossary/accessibility_tree/index.html +++ b/files/ru/glossary/accessibility_tree/index.html @@ -30,7 +30,7 @@ translation_of: Glossary/Accessibility_tree <p>Пока еще в черновике Web Incubator Community Group, <strong><a href="https://wicg.github.io/aom/explainer.html">Объектная модель доступности</a> (AOM)</strong> намерена внедрить API, которые упрощают выражение семантики доступности и потенциально разрешают доступ к вычисленному дереву доступности.</p> -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/bootstrap/index.html b/files/ru/glossary/bootstrap/index.html index 23ef352d7b..33e7b73a2a 100644 --- a/files/ru/glossary/bootstrap/index.html +++ b/files/ru/glossary/bootstrap/index.html @@ -14,7 +14,7 @@ original_slug: Глоссарий/Bootstrap <p>Изначально Bootstrap назывался Twitter Blueprint и был разработан командой, работающей в <a href="https://twitter.com/">Twitter</a>. Он поддерживает адаптивный дизайн и имеет предопределённые шаблоны дизайна, которые вы можете использовать из коробки или настроить для своих нужд с помощью кода. Вам также не нужно беспокоиться о совместимости с другими браузерами, так как Bootstrap совместим со всеми современными браузерами и новыми версиями {{glossary("Microsoft Internet Explorer", "Internet Explorer")}} .</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>{{interwiki("wikipedia", "Bootstrap (front-end framework)", "Bootstrap")}} в Wikipedia</li> <li><a href="https://getbootstrap.com/">Скачать Bootstrap</a></li> diff --git a/files/ru/glossary/call_stack/index.html b/files/ru/glossary/call_stack/index.html index ba24aad619..21f77b6330 100644 --- a/files/ru/glossary/call_stack/index.html +++ b/files/ru/glossary/call_stack/index.html @@ -90,7 +90,7 @@ greeting(); <li>{{Interwiki("wikipedia", "Call stack")}} на Википедии</li> </ul> -<section id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ru/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/crawler/index.html b/files/ru/glossary/crawler/index.html index a54589ad50..daf7041a5c 100644 --- a/files/ru/glossary/crawler/index.html +++ b/files/ru/glossary/crawler/index.html @@ -12,7 +12,7 @@ original_slug: Глоссарий/Crawler <li><a href="https://ru.wikipedia.org/wiki/%D0%9F%D0%BE%D0%B8%D1%81%D0%BA%D0%BE%D0%B2%D1%8B%D0%B9_%D1%80%D0%BE%D0%B1%D0%BE%D1%82">Поисковый робот</a> на Википедии</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/fps/index.html b/files/ru/glossary/fps/index.html index 8634a68c4c..6a6fd11b56 100644 --- a/files/ru/glossary/fps/index.html +++ b/files/ru/glossary/fps/index.html @@ -18,4 +18,4 @@ original_slug: Глоссарий/FPS <li>{{Interwiki("wikipedia", "Кадровая частота")}} на Википедии</li> </ul> -<section class="Quick_links" id="Quick_Links"></section> +<section id="Quick_links"></section> diff --git a/files/ru/glossary/global_object/index.html b/files/ru/glossary/global_object/index.html index 93b4b1acfc..cfda431f7c 100644 --- a/files/ru/glossary/global_object/index.html +++ b/files/ru/glossary/global_object/index.html @@ -51,7 +51,7 @@ window.greeting(); // Тоже самое что и обычный вызов: g console.log("Hi!"); }</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/http_2/index.html b/files/ru/glossary/http_2/index.html index dbf27aa9ba..0a0853d092 100644 --- a/files/ru/glossary/http_2/index.html +++ b/files/ru/glossary/http_2/index.html @@ -14,7 +14,7 @@ original_slug: Глоссарий/HTTP_2 <p>HTTP/2 никоим образом не изменяет семантику применяемую HTTP. Все основные концепции HTTP 1.1, такие как методы HTTP, коды статусов, URI, и поля заголовков останутся прежними. Вместо этого HTTP/2 изменит порядок(форму) данных и способ их передачи между клиентом и сервером, которые управляют всем процессом, и скроет сложность применения в новом обрамляющем слое. Это позволит использовать существующие приложения без изменений.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Основные сведения <ol> diff --git a/files/ru/glossary/loop/index.html b/files/ru/glossary/loop/index.html index 21221d230a..673db13cbd 100644 --- a/files/ru/glossary/loop/index.html +++ b/files/ru/glossary/loop/index.html @@ -73,7 +73,7 @@ while(i < 5){ <li>Блок кода будет продолжать работать, пока переменная (i) меньше 5.</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Общие сведения <ol> diff --git a/files/ru/glossary/method/index.html b/files/ru/glossary/method/index.html index a6c4943d83..ca791c83f1 100644 --- a/files/ru/glossary/method/index.html +++ b/files/ru/glossary/method/index.html @@ -28,7 +28,7 @@ original_slug: Глоссарий/Method <li><a href="/ru/docs/Web/JavaScript/Reference">Список встроенных методов JavaScript</a></li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/ru/docs/Glossary">Глоссарий MDN</a> diff --git a/files/ru/glossary/scroll_container/index.html b/files/ru/glossary/scroll_container/index.html index 5b43899c2c..3de9232490 100644 --- a/files/ru/glossary/scroll_container/index.html +++ b/files/ru/glossary/scroll_container/index.html @@ -8,7 +8,7 @@ original_slug: Глоссарий/Scroll_container <p>Scroll-контейнер позволяет пользователю с помощью прокрутки достигать участков переполняющего содержимого, которые в ином случае были бы обрезаны и поэтому недоступны для просмотра. Видимая часть scroll-контейнера называется {{glossary("Scrollport", "scrollport")}}.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a>: diff --git a/files/ru/glossary/semantics/index.html b/files/ru/glossary/semantics/index.html index 3fe96846c9..c4c0ce785d 100644 --- a/files/ru/glossary/semantics/index.html +++ b/files/ru/glossary/semantics/index.html @@ -70,7 +70,7 @@ original_slug: Глоссарий/Semantics <li>{{interwiki("wikipedia", "Semantics#Computer_science", "The meaning of semantics in computer science")}} on Wikipedia</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ul> <li><a href="/en-US/docs/Glossary">MDN Web Docs Glossary</a> diff --git a/files/ru/glossary/type_coercion/index.html b/files/ru/glossary/type_coercion/index.html index f7fe414b3c..74080fad6c 100644 --- a/files/ru/glossary/type_coercion/index.html +++ b/files/ru/glossary/type_coercion/index.html @@ -27,7 +27,7 @@ console.log(sum);</pre> <pre class="brush: js">sum = Number(value1) + value2;</pre> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/type_conversion/index.html b/files/ru/glossary/type_conversion/index.html index eae5f14c8a..14f47a0438 100644 --- a/files/ru/glossary/type_conversion/index.html +++ b/files/ru/glossary/type_conversion/index.html @@ -13,7 +13,7 @@ original_slug: Глоссарий/Type_Conversion --- <p>Преобразование типов (type conversion) означает передачу данных из одного типа данных в другой. <em>Неявное преобразование</em> происходит, когда компилятор автоматически присваивает (назначает) типы данных, но исходный код также может <em>явно</em> требовать преобразования для завершения. Например, в случае инструкции <code>5+2.0</code>, число с плавающей точкой <code>2.0</code> неявно преобразуется в целое число, но в случае инструкции <code>Number("0x11")</code> строка "0x11" явно преобразуется в типизированное число 17.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li><a href="/ru/docs/Glossary">Глоссарий</a> diff --git a/files/ru/glossary/whitespace/index.html b/files/ru/glossary/whitespace/index.html index 059b742fbf..ff6d6f9541 100644 --- a/files/ru/glossary/whitespace/index.html +++ b/files/ru/glossary/whitespace/index.html @@ -10,7 +10,7 @@ original_slug: Глоссарий/Пробельные_символы <p><a href="https://html.spec.whatwg.org/">Текущий стандарт HTML</a> описывает как пробельные 5 символов из таблицы ASCII: U+0009 TAB, U+000A LF, U+000C FF, U+000D CR и U+0020 SPACE. В тексте они будут отображены как обычные пробелы, а последовательность пробельных символов, в большинстве случаев, будет схлопнута в один пробел (это поведение можно изменить CSS-свойством {{cssxref("white-space")}}). Они могут быть использованы как разделители между названием элемента и его атрибутами, между названиями классов и т. д.</p> -<section class="Quick_links" id="Quick_Links"> +<section id="Quick_links"> <ol> <li>Спецификация <ol> diff --git a/files/ru/learn/common_questions/what_is_a_domain_name/index.html b/files/ru/learn/common_questions/what_is_a_domain_name/index.html index a624fc8e80..cd69e98d50 100644 --- a/files/ru/learn/common_questions/what_is_a_domain_name/index.html +++ b/files/ru/learn/common_questions/what_is_a_domain_name/index.html @@ -58,7 +58,7 @@ original_slug: Learn/Understanding_domain_names <h4 id="Кто_владеет_доменным_именем">Кто владеет доменным именем?</h4> -<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не владеть доменным именем.</p> +<p>Вы не можете “купить доменное имя”. Вы платите за право использовать доменное имя в течение одного или нескольких лет. Вы можете продлить это право и ваше продление будет иметь безусловный приоритет над заявками на домен от других желающих. Но вы никогда не будете владеть доменным именем.</p> <p>Компании, называемые регистраторами, ведут реестры доменных имён, которые содержат техническую и административную информацию, связывающую вас и ваш домен.</p> diff --git a/files/ru/learn/css/building_blocks/overflowing_content/index.html b/files/ru/learn/css/building_blocks/overflowing_content/index.html index 928ef12ad7..468ccf633a 100644 --- a/files/ru/learn/css/building_blocks/overflowing_content/index.html +++ b/files/ru/learn/css/building_blocks/overflowing_content/index.html @@ -1,38 +1,38 @@ --- -title: Перекрытие содержимого +title: Переполнение содержимого slug: Learn/CSS/Building_blocks/Overflowing_content translation_of: Learn/CSS/Building_blocks/Overflowing_content --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</div> -<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>overflow</strong>. Overflow это то что случается, когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p> +<p>В этом уроке мы рассмотрим другую важную концепцию в CSS — <strong>переполнение</strong>. Переполнение это то, что случается когда слишком много контента содержится внутри блока. В этом гайде вы изучите что это и как этим управлять.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + <th scope="row">Необходимые условия:</th> + <td>Базовая компьютерная грамотность, <a href="ru/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="ru/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (study <a href="/ru/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To understand overflow and how to manage it.</td> + <th scope="row">Цель:</th> + <td>Понять, что такое переполнение и как с ним работать.</td> </tr> </tbody> </table> -<h2 id="Что_такое_overflow">Что такое overflow?</h2> +<h2 id="Что_такое_overflow">Что такое переполнение?</h2> -<p>Мы уже знаем что все в CSS - блоки, и что мы можем ограничивать размер этих блоков присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Overflow это то что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный блок. CSS даёт нам различные инструменты для управления этим overflow, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с overflow достаточно часто когда пишите CSS, особенно когда глубже погрузитесь в CSS макет.</p> +<p>Мы уже знаем, что всё в CSS — блоки, и что мы можем ограничивать размер этих блоков, присваивая им определённое значение посредством {{cssxref("width")}} и {{cssxref("height")}} (или {{cssxref("inline-size")}} и {{cssxref("block-size")}}). Переполнение — это то, что случается, когда у вас слишком много контента в блоке, так что он не помещается в данный ограниченный размер. CSS даёт нам различные инструменты для управления переполнением, и это также полезная концепция для понимания на этой ранней стадии. Вы будете встречаться с переполнением достаточно часто, когда пишите CSS, особенно когда глубже погрузитесь в CSS раскладку.</p> <h2 id="CSS_пытается_избежать_потери_данных">CSS пытается избежать "потери данных"</h2> -<p>Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении перекрытия.</p> +<p>Рассмотрим два примера, демонстрирующих поведение CSS по умолчанию при возникновении переполнения.</p> -<p>Первый пример – это блок, который был ограничен установленным параметром <code>height</code>. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.</p> +<p>Первый пример — это блок, который был ограничен установленным параметром <code>height</code>. Затем мы добавили контент, превышающий выделенное пространство. Контент вышел за пределы поля и попал в абзац ниже.</p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/block-overflow.html", '100%', 600)}}</p> -<p>Второй пример – слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.</p> +<p>Второй пример — слово в блоке. Блок оказался слишком маленьким для этого слова, и поэтому оно выходит за его пределы.</p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/inline-overflow.html", '100%', 500)}}</p> @@ -40,19 +40,19 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <p>По возможности, CSS не скрывает контент, потому что это может привести к потере данных. Проблема состоит в том, что вы можете не заметить исчезновение данных. Посетители сайта тоже могут не заметить этого. Если кнопка отправки формы исчезнет и никто не может заполнить форму, это может стать большой проблемой! Поэтому, вместо того, чтобы скрывать выходящий за границы блока контент, CSS явно его отображает. Так вы с большей вероятностью увидите проблему при разработке. В худшем случае это заметит посетитель сайта и сообщит вам об этом.</p> -<p>Если вы ограничиваете поле с помощью параметров <code>width</code> или <code>height</code>, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения перекрытия. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).</p> +<p>Если вы ограничиваете поле с помощью параметров <code>width</code> или <code>height</code>, CSS доверяет вам и считает, что вы знаете, что делаете. CSS предполагает, что вы управляете ситуацией и предусматриваете возможность возникновения переполнения. В общем случае, ограничение размера блока проблематично, если он содержит текст. В этом месте может быть больше текста, чем вы ожидали или его размер может быть больше (например, если пользователь увеличил размер шрифта).</p> -<p>В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения перекрытия. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение перекрытия.</p> +<p>В следующих двух уроках объясняются различные подходы управления размерами, которые позволяют уменьшить вероятность возникновения переполнения. Однако, если вам нужен фиксированный размер блока, вы также можете контролировать поведение переполнения.</p> <h2 id="The_overflow_property">Свойство overflow</h2> -<p>Свойство {{cssxref("overflow")}} позволяет взять под контроль перекрытие элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – <code>visible</code>, что означает - «показывать контент, когда он выходит за границы блока».</p> +<p>Свойство {{cssxref("overflow")}} позволяет взять под контроль переполнение элемента и подсказать браузеру, как он должен себя вести. Значение overflow по умолчанию – <code>visible</code>, что означает - «показывать контент, когда он выходит за границы блока».</p> <p>Чтобы обрезать контент выходящий за пределы блока, вы можете установить <code>overflow: hidden</code>. Это свойство делает именно то, о чём говорит: скрывает выходящий за пределы контент. Помните, что это может сделать часть содержимого невидимым. Используйте данное значение только в том случае, если скрытие содержимого не вызовет проблем.</p> <p>{{EmbedGHLiveSample("css-examples/learn/overflow/hidden.html", '100%', 600)}}</p> -<p>Возможно, что при возникновении перекрытия вместо скрытия вы захотите отобразить полосы прокрутки. При использовании <code>overflow: scroll</code> браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.</p> +<p>Возможно, что при возникновении переполнения вместо скрытия вы захотите отобразить полосы прокрутки. При использовании <code>overflow: scroll</code> браузеры с видимыми полосами прокрутки всегда будут отображать их, даже если содержимого недостаточно для возникновения перекрытия. Это позволяет сохранить целостность раскладки, так как полосы прокрутки не будут появляться и пропадать в зависимости от количества содержимого в контейнере.</p> <p><strong>Удалите часть содержимого из поля ниже. Обратите внимание, что полосы прокрутки остаются, даже если прокрутка не требуется.</strong></p> @@ -82,44 +82,44 @@ translation_of: Learn/CSS/Building_blocks/Overflowing_content <p>Когда вы используете значение overflow, такое как <code>scroll</code> или <code>auto</code>, вы создаете <strong>контекст форматирования блока </strong> (BFC). Содержимое блока, для которого вы установили параметр <code>overflow</code> приобретает автономную раскладку. Контент вне блока не может проникнуть в блок, и ничто не может вылезти из этого блока в окружающее его пространство. Это дает возможность прокручивать содержимое, так чтобы оно не выходило за пределы блока.</p> -<h2 id="Unwanted_overflow_in_web_design">Нежелательный overflow в веб-разработке</h2> +<h2 id="Unwanted_overflow_in_web_design">Нежелательное переполнение в веб-разработке</h2> -<p>Современные методы раскладки (описанные в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладка</a>) справляются с перекрытием очень хорошо вне зависимости от того, сколько контента будет на веб-странице.</p> +<p>Современные методы раскладки (описанные в разделе <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладка</a>) справляются с переполнением очень хорошо вне зависимости от того, сколько контента будет на веб-странице.</p> -<p>Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за overflow. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.</p> +<p>Это не всегда было нормой. В прошлом некоторые сайты были построены с блоками фиксированной высоты для выравнивания нижних границ блоков. Тем не менее эти блоки могли не иметь ничего общего между собой. Это была хрупкая конструкция. В устаревших приложениях вы можете встретить блок, в котором содержимое перекрывает другое содержимое на странице. Теперь вы понимаете, что это происходит из-за переполнения. В идеале вы должны провести рефакторинг разметки, чтобы не полагаться на блоки с фиксированной высотой.</p> -<p>При разработке сайта всегда помните о перекрытии. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).</p> +<p>При разработке сайта всегда помните о переполнении. Тестируйте дизайны как с большим, так и с малым количеством контента. Проверяйте различные размеры шрифта текстов. Убедитесь, что ваш CSS работает надёжно. Изменение значения overflow для скрытия содержимого или добавления полос прокрутки, должно использоваться только при необходимости (например там, где вы хотите использовать прокручиваемый блок).</p> <h2 id="Test_your_skills!">Проверьте свои навыки!</h2> -<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Проверь свои навыки: overflow</a>.</p> +<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы усвоили эту информацию, прежде чем двигаться дальше – см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflow_Tasks">Проверь свои навыки: переполнение</a>.</p> <h2 id="Summary">Заключение</h2> -<p>В этом уроке была представлена концепция перекрытия. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим перекрытием, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.</p> +<p>В этом уроке была представлена концепция переполнения. Важно понимать, что CSS по умолчанию старается избежать обрезания выходящего за границы блока содержимого. Мы изучили, как можно справиться с возникшим переполнением, а также рассмотрели важность тестирования поведения веб-страниц как с малым количеством контента, так и с большим.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Handling_different_text_directions", "Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks")}}</p> <h2 id="In_this_module">In this module</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li> </ol> diff --git a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html index 198f9f6ecc..6746ecf098 100644 --- a/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html +++ b/files/ru/learn/css/building_blocks/sizing_items_in_css/index.html @@ -5,125 +5,129 @@ translation_of: Learn/CSS/Building_blocks/Sizing_items_in_CSS --- <div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</div> -<p>In the various lessons so far you have come across a number of ways to size items on a web page using CSS. Understanding how big the different features in your design will be is important, and in this lesson we will summarize the various ways elements get a size via CSS and define a few terms around sizing that will help you in the future.</p> +<p>В предыдущих уроках вы познакомились с некоторыми способами изменения размеров элементов на веб-странице с помощью CSS. Понимание того, насколько велики будут различные элементы в вашем дизайне — важно, и в этом уроке мы подведем итог по различным способам задания размеров элементов с помощью CSS и расскажем о некоторых терминах, связанных с размерами, которые помогут вам в будущем.</p> <table class="learn-box standard-table"> <tbody> <tr> - <th scope="row">Prerequisites:</th> - <td>Basic computer literacy, <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Installing_basic_software">basic software installed</a>, basic knowledge of <a href="https://developer.mozilla.org/en-US/Learn/Getting_started_with_the_web/Dealing_with_files">working with files</a>, HTML basics (study <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Introduction to HTML</a>), and an idea of how CSS works (study <a href="/en-US/docs/Learn/CSS/First_steps">CSS first steps</a>.)</td> + <th scope="row">Необходимые условия:</th> + <td>Базовая компьютерная грамотность, <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Installing_basic_software">Установка базового ПО</a>, базовые знания <a href="https://developer.mozilla.org/ru-RU/Learn/Getting_started_with_the_web/Dealing_with_files">работы с файлами</a>, основы HTML (<a href="/ru-RU/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a>), и общее представление о том, как работает CSS (<a href="/ru-RU/docs/Learn/CSS/First_steps">Введение в CSS</a>.)</td> </tr> <tr> - <th scope="row">Objective:</th> - <td>To understand the different ways we can size things in CSS.</td> + <th scope="row">Цель:</th> + <td>Изучить различные способы задания размеров объектов в CSS.</td> </tr> </tbody> </table> -<h2 id="The_natural_or_intrinsic_size_of_things">The natural or intrinsic size of things</h2> +<h2 id="The_natural_or_intrinsic_size_of_things">Размер по умолчанию или внутренний размер</h2> -<p>HTML Elements have a natural size, set before they are affected by any CSS. A straightforward example is an image. An image has a width and a height defined in the image file it is embedding into the page. This size is described as the <strong>intrinsic size</strong> — which comes from the image itself.</p> +<p>Элементы HTML имеют размеры по умолчанию, заданные до того, как на них повлияет какое-либо правило CSS. Простой пример — изображение. Изображение имеет ширину и высоту, определенные в файле изображения. Этот размер называется — <strong>внутренний размер</strong>, он исходит из самого изображения.</p> -<p>If you place an image on a page and do not change its height and width, either using attributes on the <code><img></code> tag or CSS, it will be displayed using that intrinsic size. We have given the image in the example below a border so that you can see the extent of the file.</p> +<p>Если вы разместите изображение на странице и не измените его высоту и ширину, используя атрибуты тега <code><img></code> или CSS, оно будет отображаться с использованием этого внутреннего размера. В примере ниже, мы установили для изображения рамку, чтобы вы могли видеть размер файла.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-image.html", '100%', 600)}}</p> -<p>An empty {{htmlelement("div")}} however, has no size of its own. If you add a {{htmlelement("div")}} to your HTML with no content, then give it a border as we did with the image, you will see a line on the page. This is the collapsed border on the element — there is no content to hold it open. In our example below, that border stretches to the width of the container, because it is a block level element, a behavior that should be starting to become familiar to you. It has no height (or size in the block dimension) because there is no content.</p> +<p>С другой стороны, пустой {{htmlelement("div")}} не имеет собственного размера. Если вы добавите {{htmlelement("div")}} в свой HTML-код без содержимого, а затем установите для него рамку, как мы это делали с изображением, вы увидите линию на странице. Это схлопнувшиеся границы элемента — содержимое, которое могло бы удерживать ее в открытом состоянии, отсутствует. В нашем примере ниже эта граница растягивается на всю ширину контейнера, потому что это элемент блочный, поведение которого должно быть вам знакомо. У него нет высоты, потому что нет содержимого.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/intrinsic-text.html", '100%', 500)}}</p> -<p>In the example above, try adding some text inside the empty element. The border now contains that text because the height of the element is defined by the content. Therefore the size of this <code><div></code> in the block dimension comes from the size of the content. Again, this is the intrinsic size of the element — its size is defined by its content.</p> +<p>В приведенном выше примере попробуйте добавить текст внутри пустого элемента. Этот текст теперь становится охваченным границами, потому что высота элемента определяется содержимым. Следовательно, размер этого <code><div></code> устанавливается размером содержимого. Как и в предыдущем примере, этот размер является внутренним размером — размер элемента определяется размером его содержимого.</p> -<h2 id="Setting_a_specific_size">Setting a specific size</h2> +<h2 id="Setting_a_specific_size">Присваивание определенного размера</h2> -<p>We can of course give elements in our design a specific size. When a size is given to an element (and the content of which then needs to fit into that size) we refer to it as an <strong>extrinsic size</strong>. Take our <code><div></code> from the example above — we can give it specific {{cssxref("width")}} and {{cssxref("height")}} values, and it will now have that size no matter what content is placed into it. As we discovered in <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">our previous lesson on overflow</a>, a set height can cause content to overflow if there is more content than the element has space to fit inside it.</p> +<p>Конечно, мы можем задать элементам нашей страницы определенный размер. Размер, который присваивается элементу (содержимое, которого затем должно соответствовать этому размеру), называется <strong>внешним размером</strong>. Возьмите наш <code><div></code> из примера выше и установите ему специальные значения {{cssxref("width")}} и {{cssxref("height")}} и теперь он будет иметь эти размеры, независимо от того, какого размера содержимое в него помещается. Как мы узнали в <a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">нашем предыдущем уроке о переполнении</a>, заданная высота блока может вызвать переполнение содержимого, если размер содержимого больше, чем внутреннее пространство элемента.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/height.html", '100%', 600)}}</p> -<p>Due to this problem of overflow, fixing the height of elements with lengths or percentages is something we need to do very carefully on the web.</p> +<p>Из-за этой проблемы перекрытия, жестко задавать высоту элементов с помощью длинны или процентного соотношения — это то, что нужно делать с большой осторожностью.</p> -<h3 id="Using_percentages">Using percentages</h3> +<h3 id="Using_percentages">Использование процентного соотношения</h3> -<p>In many ways percentages act like length units, and as we <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">discussed in the lesson on values and units</a>, they can often be used interchangeably with lengths. When using a percentage you need to be aware what it is a percentage <em>of</em>. In the case of a box inside another container, if you give the child box a percentage width it will be a percentage of the width of the parent container.</p> +<p>Во многих отношениях проценты действуют как единицы длины, и, как мы <a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units#Percentages">обсуждали в уроке, посвященном значениям и единицам</a>, они часто могут использоваться как взаимозаменяемые с длиной. При использовании процентов вы должны знать, <em>от чего этот процент рассчитывается</em>. В случае блока внутри другого блока, если вы зададите дочернему блоку процентную ширину, это будет процент от ширины родительского контейнера.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-width.html", '100%', 600)}}</p> -<p>This is because percentages resolve against the size of the containing block. With no percentage applied our <code><div></code> would take up 100% of the available space, as it is a block level element. If we give it a percentage width, this becomes a percentage of the space it would normally fill.</p> +<p>Это потому, что проценты рассчитываются в зависимости от размера содержащего элемент блока. Если процентное соотношение не применяется, наш <code><div></code> будет занимать 100% доступного пространства, так как это элемент блочного типа. Если мы зададим ему ширину в процентах, он займет процент от пространства, которое он обычно заполняет.</p> -<h3 id="Percentage_margins_and_padding">Percentage margins and padding</h3> +<h3 id="Percentage_margins_and_padding">Margins и paddings в процентах</h3> -<p>If you set <code>margins</code> and <code>padding</code> as a percentage you may notice some strange behavior. In the below example we have a box. We have given the inner box a {{cssxref("margin")}} of 10% and a {{cssxref("padding")}} of 10%. The padding and margin on the top and bottom of the box are the same size as the margin on the left and right.</p> +<p>Если вы установите <code>margins</code> и <code>padding</code> в процентах, вы можете заметить странное поведение. В приведенном ниже примере у нас есть блок. Мы присвоили внутреннему блоку {{cssxref("margin")}} 10% и {{cssxref("padding")}} 10%. Padding и margin сверху и снизу имеют тот же размер, что и margins слева и справа.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/percent-mp.html", '100%', 700)}}</p> -<p>You might expect for example the percentage top and bottom margins to be a percentage of the element's height, and the percentage left and right margins to be a percentage of the element's width. However, this is not the case!</p> +<p>Например, вы можете ожидать, что процентное значение верхнего и нижнего margins будет в процентах от высоты элемента, а процентное левое и правое margins — в процентах от ширины элемента. Тем не менее, это не так!</p> -<p>When you use margin and padding set in percentages, the value is calculated from the<strong> inline size</strong> — therefore the width when working in a horizontal language. In our example, all of the margins and padding are 10% of the width. This means you can have equal sized margins and padding all round the box. This is a fact worth remembering if you do use percentages in this way.</p> +<p>При использовании margins и padding, заданных в процентах, значение рассчитывается на основе <strong>inline размера</strong> блока — следовательно, ширины при работе с горизонтальным языком. В нашем примере все поля и отступы составляют 10% width. Это означает, что вы будете иметь margins и padding одинакового размера по всему полю. Этот факт стоит запомнить, если вы действительно пользуетесь процентами.</p> -<h2 id="min-_and_max-_sizes">min- and max- sizes</h2> +<h2 id="min-_and_max-_sizes">Минимальные и максимальные размеры</h2> -<p>In addition to giving things a fixed size, we can ask CSS to give an element a minimum or a maximum size. If you have a box that might contain a variable amount of content, and you always want it to be <em>at least</em> a certain height, you could set the {{cssxref("min-height")}} property on it. The box will always be at least this height, but will then grow taller if there is more content than the box has space for at its minimum height.</p> +<p>Помимо возможности установить фиксированный размер, мы можем использовать CSS чтобы задать элементу минимальный или максимальный размер. Если у вас есть блок, который может содержать разное количество содержимого, и вы хотите, чтобы он всегда был определенной минимальной высоты, вы можете установить для него свойство {{cssxref("min-height")}}. Блок всегда будет минимальной заданной высоты, пока содержимого не станет больше, чем места в блоке.</p> -<p>In the example below you can see two boxes, both with a defined height of 150 pixels. The box on the left is 150 pixels tall; the box on the right has content that needs more room, and so it has grown taller than 150 pixels.</p> +<p>В приведенном ниже примере вы можете увидеть два блока, обоим задали минимальную высоту в 150 пикселей. Блок слева имеет высоту 150 пикселей несмотря на то что в нем нет текста. В блоке справа есть контент, которому нужно больше места, чем минимальная заданная высота, поэтому он увеличился.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/min-height.html", '100%', 800)}}</p> -<p>This is very useful for dealing with variable amounts of content while avoiding overflow.</p> +<p>Это очень полезно при работе с переменным объемом контента, избегая при этом переполнения.</p> -<p>A common use of {{cssxref("max-width")}} is to cause images to scale down if there is not enough space to display them at their intrinsic width, while making sure they don't become larger than that width.</p> +<p>Часто {{cssxref("max-width")}} применяют для уменьшения масштаба изображений, если недостаточно места для их отображения.</p> -<p>As an example, if you were to set <code>width: 100%</code> on an image, and its intrinsic width was smaller than its container, the image would be forced to stretch and become larger, causing it to look pixellated. If its intrinsic width were larger than its container, it would overflow it. Neither case is likely to be what you want to happen.</p> +<p>Например, если бы вы установили <code>width: 100%</code> для изображения, а его внутренняя ширина была меньше, чем его контейнер, изображение было бы вынуждено растягиваться и становиться больше, в результате чего оно выглядело бы пикселизированным.</p> -<p>If you instead use <code>max-width: 100%</code>, the image is able to become smaller than its intrinsic size, but will stop at 100% of its size.</p> +<p>Если бы вы вместо этого применили <code>max-width: 100%</code>%, и внутренняя ширина изображения была бы меньше, чем его контейнер, изображение не будет принудительно растягиваться и становиться больше, что предотвращает пикселизацию.</p> -<p>In the example below we have used the same image twice. The first image has been given <code>width: 100%</code> and is in a container which is larger than it, therefore it stretches to the container width. The second image has <code>max-width: 100%</code> set on it and therefore does not stretch to fill the container. The third box contains the same image again, also with <code>max-width: 100%</code> set; in this case you can see how it has scaled down to fit into the box.</p> +<p>В приведенном ниже примере мы использовали одно и то же изображение трижды. Первому изображению было задано <code>width: 100%</code> и оно находится в контейнере, который больше его ширины, поэтому он растягивается до ширины контейнера. Второму изображению задано <code>max-width: 100%</code>, изображение достигло 100% своей ширины не растягивается, чтобы заполнить контейнер. Третье поле снова содержит то же изображение, также с <code>max-width: 100%</code> в этом случае вы можете увидеть, как он уменьшилось, чтобы поместиться в контейнер.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/max-width.html", '100%', 800)}}</p> -<p>This technique is used to make images <em>responsive</em>, so that when viewed on a smaller device they scale down appropriately. You should however not use this technique to load in really large images and then scale them down in the browser. Images should be appropriately sized to be no larger than they need to be for the largest size they are displayed in the design. Downloading overly large images will cause your site to become slow, and it can cost users more money if they are on a metered connection.</p> +<p>Этот метод используется для создания <em>отзывчивых</em> изображений, чтобы при просмотре на меньшем устройстве они соответствующим образом уменьшались. Однако вам не следует использовать эту технику для загрузки действительно больших изображений с последующим их уменьшением в браузере. Изображения должны иметь соответствующий размер, чтобы быть не больше, чем они должны быть для самого большого размера, отображаемого в дизайне. Загрузка слишком больших изображений замедлит работу вашего сайта и может стоить пользователям больше денег, если они используют лимитированное соединение.</p> <div class="blockIndicator note"> -<p><strong>Note</strong>: Find out more about <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">responsive image techniques</a>.</p> +<p><strong>Примечание</strong>: Узнайте больше о <a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">методах создания адаптивных изображений</a>.</p> </div> -<h2 id="Viewport_units">Viewport units</h2> +<h2 id="Viewport_units">Единицы вьюпорта</h2> -<p>The viewport — which is the visible area of your page in the browser you are using to view a site — also has a size. In CSS we have units which relate to the size of the viewport — the <code>vw</code> unit for viewport width, and <code>vh</code> for viewport height. Using these units you can size something relative to the viewport of the user.</p> +<p>Вьюпо́рт — это видимая область вашей страницы в браузере, который вы используете для просмотра сайта. В CSS у нас есть единицы измерения, которые относятся к размеру вьюпорта — <code>vw</code> единицы ширины вьюпорта и <code>vh</code> высоты вьюпорта. Используя эти единицы измерения, вы можете изменять размер чего-либо относительно вьюпорта пользователя.</p> -<p><code>1vh</code> is equal to 1% of the viewport height, and <code>1vw</code> is equal to 1% of the viewport width. You can use these units to size boxes, but also text. In the example below we have a box which is sized as 20vh and 20vw. The box contains a letter <code>A</code>, which has been given a {{cssxref("font-size")}} of 10vh.</p> +<p><code>1vh</code> равен 1% от высоты вьюпорта и <code>1vw</code> равен 1% ширины вьюпорта. Вы можете использовать эти единицы измерения для размеров блоков, а также текста. В приведенном ниже примере у нас есть блок размером 20vh и 20vw. В блоке есть буква <code>A</code>, которой присвоено значение {{cssxref("font-size")}} 10vh.</p> <p>{{EmbedGHLiveSample("css-examples/learn/sizing/vw-vh.html", '100%', 600)}}</p> -<p><strong>If you change the <code>vh</code> and <code>vw</code> values this will change the size of the box or font; changing the viewport size will also change their sizes because they are sized relative to the viewport. To see the example change when you change the viewport size you will need to load the example in a new browser window that you can resize (as the embedded <code><iframe></code> that contains the example shown above is its viewport). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Open the example</a>, resize the browser window, and observe what happens to the size of the box and text.</strong></p> +<p><strong>Если вы измените величину <code>vh</code> и <code>vw</code> — это изменит размер блока или шрифт; изменение размера вьюпорта также изменит их размеры, поскольку они имеют размер заданный относительно вьюпорта. Чтобы увидеть изменение примера при изменении размера вьюпорта, вам нужно будет загрузить пример в новое окно браузера, размер которого можно изменить (поскольку встроенное приложение <code><iframe></code>, содержащее показанный выше пример, является его окном просмотра). <a href="https://mdn.github.io/css-examples/learn/sizing/vw-vh.html">Откройте пример</a>, измените размер окна браузера и посмотрите, что происходит с размером поля и текста.</strong></p> -<p>Sizing things according to the viewport can be useful in your designs. For example, if you want a full page hero section to show before the rest of your content, making that part of your page 100vh high will push the rest of the content below the viewport, meaning that it will only appear once the document is scrolled.</p> +<p>Размеры объектов задаваемые в соответствии с вьюпортом могут быть полезны в ваших проектах. Например, если вы хотите, чтобы основная секция отображалась перед остальным контентом, установите для этой части страницы высоту 100vh, это приведет к выталкиванию остального контента ниже видимой области, что означает, что он появится только после того, как страницу прокрутят вниз.</p> -<h2 id="Summary">Summary</h2> +<h2 id="Test_your_skills!">Проверьте свои навыки!</h2> -<p>This lesson has given you a rundown of some key issues that you might run into when sizing things on the web. When you move onto <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS Layout</a>, sizing will become very important in mastering the different layout methods, so it is worth understanding the concepts here before moving on.</p> +<p>В этой статье мы рассмотрели многое, но можете ли вы вспомнить самую важную информацию? Вы можете найти дополнительные тесты, чтобы убедиться, что вы сохранили эту информацию, прежде чем двигаться дальше - см. <a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_tasks">Проверка своих навыков: задание размеров</a>.</p> + +<h2 id="Summary">Заключение</h2> + +<p>Этот урок дал вам краткое изложение некоторых ключевых проблем, с которыми вы можете столкнуться при определении размеров объектов в Интернете. Когда вы перейдете к <a href="/en-US/docs/Learn/CSS/CSS_layout">CSS раскладке</a>, изменение размеров станет очень важным для освоения различных методов раскладки, поэтому перед тем, как двигаться дальше, стоит разобраться в концепциях.</p> <p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Values_and_units", "Learn/CSS/Building_blocks/Images_media_form_elements", "Learn/CSS/Building_blocks")}}</p> -<h2 id="In_this_module">In this module</h2> +<h2 id="In_this_module">В этом модуле</h2> <ol> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Cascade and inheritance</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">CSS selectors</a> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">Каскад и наследование</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors">Селекторы CSS</a> <ul> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Type, class, and ID selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Attribute selectors</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Pseudo-classes and pseudo-elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinators</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Селекторы типа, класса и ID</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Селекторы атрибута</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Псевдоклассы и псевдоэлементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Комбинаторы</a></li> </ul> </li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">The box model</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Backgrounds and borders</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Handling different text directions</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">Overflowing content</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Values and units</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Sizing items in CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Images, media, and form elements</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Styling tables</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Debugging CSS</a></li> - <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organizing your CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/The_box_model">Блочная модель(The box model)</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Фон и границы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">Обработка разных направлений текста</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Overflowing_content">Переполнение содержимого</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Values_and_units">Значения и единицы измерения</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Размеры в CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Элементы изображений, форм и медиа-элементы</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Styling_tables">Стилизация таблиц</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Debugging_CSS">Отладка CSS</a></li> + <li><a href="/ru/docs/Learn/CSS/Building_blocks/Organizing">Организация вашей CSS</a></li> </ol> diff --git a/files/ru/web/api/windoworworkerglobalscope/atob/index.html b/files/ru/web/api/atob/index.html index 689abf3503..931c4deb95 100644 --- a/files/ru/web/api/windoworworkerglobalscope/atob/index.html +++ b/files/ru/web/api/atob/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.atob() -slug: Web/API/WindowOrWorkerGlobalScope/atob +slug: Web/API/atob translation_of: Web/API/WindowOrWorkerGlobalScope/atob +original_slug: Web/API/WindowOrWorkerGlobalScope/atob --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html b/files/ru/web/api/btoa/index.html index 24f0c7ab38..12080d8fa6 100644 --- a/files/ru/web/api/windoworworkerglobalscope/btoa/index.html +++ b/files/ru/web/api/btoa/index.html @@ -1,8 +1,8 @@ --- title: WindowBase64.btoa() -slug: Web/API/WindowOrWorkerGlobalScope/btoa +slug: Web/API/btoa translation_of: Web/API/WindowOrWorkerGlobalScope/btoa -original_slug: Web/API/WindowBase64/btoa +original_slug: Web/API/WindowOrWorkerGlobalScope/btoa --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ru/web/api/windoworworkerglobalscope/caches/index.html b/files/ru/web/api/caches/index.html index 107d43f6a4..78e2f33014 100644 --- a/files/ru/web/api/windoworworkerglobalscope/caches/index.html +++ b/files/ru/web/api/caches/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.caches -slug: Web/API/WindowOrWorkerGlobalScope/caches +slug: Web/API/caches translation_of: Web/API/WindowOrWorkerGlobalScope/caches +original_slug: Web/API/WindowOrWorkerGlobalScope/caches --- <div>{{APIRef()}}{{SeeCompatTable}}</div> diff --git a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html b/files/ru/web/api/cleartimeout/index.html index aeedb7435c..e19fc0fe1b 100644 --- a/files/ru/web/api/windoworworkerglobalscope/cleartimeout/index.html +++ b/files/ru/web/api/cleartimeout/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.clearTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout +slug: Web/API/clearTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/clearTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/clearTimeout --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ru/web/api/element/mouseenter_event/index.html b/files/ru/web/api/element/mouseenter_event/index.html index 2d73aa25e1..a8cef8d47a 100644 --- a/files/ru/web/api/element/mouseenter_event/index.html +++ b/files/ru/web/api/element/mouseenter_event/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Element/mouseenter_event <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>mouseover</code><span class="tlid-translation translation" lang="ru"><span title=""> может быть довольно большим и вызывать значительные проблемы с производительностью.</span> <span title="">В таких случаях лучше обрабатывать события </span></span><code>mouseenter</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> diff --git a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html b/files/ru/web/api/fetch/index.html index 22b188e0bd..788b9c3f69 100644 --- a/files/ru/web/api/windoworworkerglobalscope/fetch/index.html +++ b/files/ru/web/api/fetch/index.html @@ -1,11 +1,12 @@ --- title: WindowOrWorkerGlobalScope.fetch() -slug: Web/API/WindowOrWorkerGlobalScope/fetch +slug: Web/API/fetch tags: - Справка - запрос - метод translation_of: Web/API/WindowOrWorkerGlobalScope/fetch +original_slug: Web/API/WindowOrWorkerGlobalScope/fetch --- <div>{{APIRef("Fetch API")}}</div> 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 index 8b256b13db..b243921b8b 100644 --- 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 @@ -28,7 +28,7 @@ translation_of: Web/API/File/Using_files_from_web_applications var selectedFile = $('#input')[0].files[0];</pre> <div class="note"> -<p>Если вы получили ошибку "files is undefined", значит вы выбрали не один HTML-элемент, а список элементов, который возвращает jQuery. Нужно уточнить, у какого именно элемента необходимо вызвать метод "files"</p> +<p>Ошибка "files is undefined" означает что был выбран не один HTML-элемент, а список элементов, возвращаемый jQuery. Необходимо уточнить, у какого именно элемента требуется вызвать метод "files"</p> </div> <h3 id="Доступ_к_выбранным_файлам_через_событие_change">Доступ к выбранным файлам через событие change</h3> diff --git a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html b/files/ru/web/api/setinterval/index.html index c77c422bf1..81df340981 100644 --- a/files/ru/web/api/windoworworkerglobalscope/setinterval/index.html +++ b/files/ru/web/api/setinterval/index.html @@ -1,7 +1,8 @@ --- title: WindowOrWorkerGlobalScope.setInterval() -slug: Web/API/WindowOrWorkerGlobalScope/setInterval +slug: Web/API/setInterval translation_of: Web/API/WindowOrWorkerGlobalScope/setInterval +original_slug: Web/API/WindowOrWorkerGlobalScope/setInterval --- <div>{{APIRef("HTML DOM")}}</div> diff --git a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html b/files/ru/web/api/settimeout/index.html index dbc08996a2..d35da11a1c 100644 --- a/files/ru/web/api/windoworworkerglobalscope/settimeout/index.html +++ b/files/ru/web/api/settimeout/index.html @@ -1,8 +1,8 @@ --- title: WindowTimers.setTimeout() -slug: Web/API/WindowOrWorkerGlobalScope/setTimeout +slug: Web/API/setTimeout translation_of: Web/API/WindowOrWorkerGlobalScope/setTimeout -original_slug: Web/API/WindowTimers/setTimeout +original_slug: Web/API/WindowOrWorkerGlobalScope/setTimeout --- <div>{{ APIRef() }}</div> diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index 9bfa53d259..2bb74d406d 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -398,7 +398,7 @@ function voiceMute() { // toggle to mute and unmute sound <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"> +<section id="Quick_links"> <h3 id="Quicklinks">Quicklinks</h3> <ol> 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 index 454bc054db..f75bb36cd9 100644 --- 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 @@ -80,7 +80,7 @@ var abyte = filestream.charCodeAt(x) & 0xff; // throw away high-order byte ( <h2 id="Получение_бинарных_данных_из_различных_источников">Получение бинарных данных из различных источников</h2> -<p>Библиотека <a href="https://github.com/jDataView/jBinary">jBinary</a> для работы с бинарными данными в JavaScript позволяет загрузить данные из любого источника, автоматически определяя лучший способ для этого в текущем броузере или Node.js:</p> +<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` может использовться для обработки данных diff --git a/files/ru/web/css/background-blend-mode/index.html b/files/ru/web/css/background-blend-mode/index.html deleted file mode 100644 index 1bbc67d090..0000000000 --- a/files/ru/web/css/background-blend-mode/index.html +++ /dev/null @@ -1,98 +0,0 @@ ---- -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><blend-mode></code></dt> - <dd>{{cssxref("<blend-mode>")}} обозначающий режим наложения, который применён. Может быть несколько значений, разделённых запятыми.</dd> -</dl> - -<h2 id="Examples" name="Examples">Пример</h2> - -<select id="select"> - <option>normal</option> - <option>multiply</option> - <option selected>screen</option> - <option>overlay</option> - <option>darken</option> - <option>lighten</option> - <option>color-dodge</option> - <option>color-burn</option> - <option>hard-light</option> - <option>soft-light</option> - <option>difference</option> - <option>exclusion</option> - <option>hue</option> - <option>saturation</option> - <option>color</option> - <option>luminosity</option> -</select></pre> - -<pre class="brush: css" class="hidden">#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" class="hidden">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>{{Compat("css.properties.background-blend-mode")}}</p> - -<h2 id="See_also" name="See_also">Смотрите также</h2> - -<ul> - <li>{{cssxref("<blend-mode>")}}</li> - <li>{{cssxref("mix-blend-mode")}}</li> -</ul> diff --git a/files/ru/web/css/background-blend-mode/index.md b/files/ru/web/css/background-blend-mode/index.md new file mode 100644 index 0000000000..63112f57d6 --- /dev/null +++ b/files/ru/web/css/background-blend-mode/index.md @@ -0,0 +1,115 @@ +--- +title: background-blend-mode +slug: Web/CSS/background-blend-mode +tags: + - CSS + - CSS-свойство + - Композиция и наложение + - recipe:css-property +translation_of: Web/CSS/background-blend-mode +browser-compat: css.properties.background-blend-mode +--- +{{CSSRef()}} + +[CSS-свойство](/ru/docs/Web/CSS) **`background-blend-mode`** описывает то, как фоновое изображение элемента должно накладываться на фоны других элементов. + +{{EmbedInteractiveExample("pages/css/background-blend-mode.html")}} + +Режимы наложения должны быть определены в том же порядке, что и CSS-свойство {{cssxref("background-image")}}. Если количество режимов наложения будет больше или меньше количества фоновых изображений, то последние режимы будут либо отброшены, либо повторены до совпадения количества соответственно. + +## Cинтаксис + +```css +/* Одно значение */ +background-blend-mode: normal; + +/* Два значения, по одному на каждый фон */ +background-blend-mode: darken, luminosity; + +/* Глобальные значения */ +background-blend-mode: initial; +background-blend-mode: inherit; +background-blend-mode: revert; +background-blend-mode: unset; +``` + +### Значения + +- {{cssxref("<blend-mode>")}} + - : Применяемый режим наложения. Можно указать несколько значений, разделённых запятыми. + +## Формальное определение + +{{cssinfo}} + +## Формальный синтаксис + +{{csssyntax}} + +## Примеры + +### Простой пример + +```css +.item { + width: 300px; + height: 300px; + background: url('image1.png'),url('image2.png'); + background-blend-mode: screen; +} +``` + +### Попробуйте разные режимы смешивания + +```html hidden +<div id="div"></div> +<select id="select"> + <option>normal</option> + <option>multiply</option> + <option selected>screen</option> + <option>overlay</option> + <option>darken</option> + <option>lighten</option> + <option>color-dodge</option> + <option>color-burn</option> + <option>hard-light</option> + <option>soft-light</option> + <option>difference</option> + <option>exclusion</option> + <option>hue</option> + <option>saturation</option> + <option>color</option> + <option>luminosity</option> +</select> +``` + +```css hidden +#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; +} +``` + +```js hidden +document.getElementById("select").onchange = function(event) { + document.getElementById("div").style.backgroundBlendMode = document.getElementById("select").selectedOptions[0].innerHTML; +} +console.log(document.getElementById('div')); +``` + +{{ EmbedLiveSample('Примеры', "330", "350") }} + +## Спецификации + +{{Specifications}} + +## Совместимость с браузерами + +{{Compat}} + +## Смотрите также + +- {{cssxref("<blend-mode>")}} +- {{cssxref("mix-blend-mode")}} diff --git a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html index 8e798f9292..ebd9771810 100644 --- a/files/ru/web/css/css_background_and_borders/border-image_generator/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/border-image_generator/index.html @@ -1,10 +1,11 @@ --- title: Генератор Border-image -slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-image_generator tags: - CSS - Tools translation_of: Web/CSS/CSS_Background_and_Borders/Border-image_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Border-image_generator --- <p>Этот инструмент можно использовать, чтобы генерировать CSS3 значения {{cssxref("border-image")}}.</p> diff --git a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html index d8aafac807..103a3e0965 100644 --- a/files/ru/web/css/css_background_and_borders/border-radius_generator/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/border-radius_generator/index.html @@ -1,8 +1,8 @@ --- title: Border-radius генератор -slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Border-radius_generator translation_of: Web/CSS/CSS_Background_and_Borders/Border-radius_generator -original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_генератор +original_slug: Web/CSS/CSS_Background_and_Borders/Border-radius_generator --- <p>С помощью этого инструмента вы можете создать CSS3 {{cssxref("border-radius")}} эффекты.</p> diff --git a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html index 4530073ad2..8252c21112 100644 --- a/files/ru/web/css/css_background_and_borders/box-shadow_generator/index.html +++ b/files/ru/web/css/css_backgrounds_and_borders/box-shadow_generator/index.html @@ -1,12 +1,12 @@ --- title: Генератор теней -slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator +slug: Web/CSS/CSS_Backgrounds_and_Borders/Box-shadow_generator tags: - CSS3 - Тень - инструменты translation_of: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator -original_slug: Web/CSS/CSS_Box_Model/Box-shadow_generator +original_slug: Web/CSS/CSS_Background_and_Borders/Box-shadow_generator --- <p>Этот инструмент позволяет вам создавать CSS {{cssxref("box-shadow")}} эффекты, добавлять тени вашим элементам.</p> diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 3863c2862e..ee7162f19b 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -45,7 +45,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> </ul> -<section class="Quick_links" id="Quick_Links"> +<section 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> 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 index 0bf469ac46..4fd846a256 100644 --- 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 @@ -665,7 +665,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <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"> +<section 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> 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 index 80d1ad38af..cce90b7f30 100644 --- 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 @@ -644,7 +644,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <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"> +<section 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> 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 index d94570b6f2..f7b2f65cb7 100644 --- 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 @@ -440,7 +440,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Mode <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"> +<section 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> diff --git a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html index bdf9906212..830df019a4 100644 --- a/files/ru/web/css/css_grid_layout/grid_template_areas/index.html +++ b/files/ru/web/css/css_grid_layout/grid_template_areas/index.html @@ -471,7 +471,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Если вы проработали эти начальные руководства, теперь вы должны иметь возможность создавать сетки с использованием линейного размещения или названных областей. Потратьте некоторое время на создание некоторых общих шаблонов макетов с использованием сетки, в то время как есть много новых терминов для изучения, синтаксис относительно прост. По мере того, как вы разрабатываете примеры, вы, вероятно, придумаете некоторые вопросы и воспользуетесь случаями, которые мы ещё не рассмотрели. В остальных этих руководствах мы рассмотрим некоторые детали, включённые в спецификацию, - чтобы вы могли начать создавать с ним расширенные макеты.</p> -<section class="Quick_links" id="Quick_Links"> +<section 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> diff --git a/files/ru/web/css/css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/index.html index 4e6e70cf5f..bac225352c 100644 --- a/files/ru/web/css/css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/index.html @@ -177,7 +177,7 @@ translation_of: Web/CSS/CSS_Grid_Layout </tbody> </table> -<section class="Quick_links" id="Quick_Links"> +<section 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> 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 index 043d708e69..4d95530d74 100644 --- 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 @@ -434,7 +434,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines <p>Это все, что мне нужно. Мне не нужно делать никаких вычислений, сетка автоматически удалила мою 10- пиксельную дорожку желоба, прежде чем назначить пространство для треков столбцов 1fr. Когда вы начнёте создавать свои собственные макеты, вы обнаружите, что синтаксис становится более знакомым, и вы выбираете способы, которые лучше всего подходят для вас, а также тип проектов,которые вам нравятся. Попробуйте построить несколько общих шаблонов с помощью этих различных методов, и вскоре вы найдёте свой самый продуктивный способ работы. В следующем руководстве мы рассмотрим, как сетка может размещать элементы для нас - без необходимости использовать свойства размещения вообще!</p> -<section class="Quick_links" id="Quick_Links"> +<section 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> diff --git a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html index 682f3051b8..8c8713b6b4 100644 --- a/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html +++ b/files/ru/web/css/css_grid_layout/line-based_placement_with_css_grid/index.html @@ -594,7 +594,7 @@ original_slug: >- <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"> +<section 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> 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 index 625700ca08..42a0ac6b0d 100644 --- 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 @@ -534,7 +534,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <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"> +<section 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> 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 index d92d33d0f7..1d3c710434 100644 --- 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 @@ -567,7 +567,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Как вы могли увидеть, CSS Grid Layout - это часть вашего инструментария. Не бойтесь смешивать его с другими методами создания макетов, чтобы получить различные эффекты. И не переключайтесь, дальше будет много интересного.</p> -<section class="Quick_links" id="Quick_Links"> +<section 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> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index 2712892e54..eef3305724 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -140,7 +140,7 @@ grid-area: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 226db2bb76..3d8b2e0892 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -150,7 +150,7 @@ grid-auto-flow: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid-row-start/index.html b/files/ru/web/css/grid-row-start/index.html index 5817eef381..b3e5722198 100644 --- a/files/ru/web/css/grid-row-start/index.html +++ b/files/ru/web/css/grid-row-start/index.html @@ -173,7 +173,7 @@ grid-row-start: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid-template-areas/index.html b/files/ru/web/css/grid-template-areas/index.html index 3e9a83e744..9930232eec 100644 --- a/files/ru/web/css/grid-template-areas/index.html +++ b/files/ru/web/css/grid-template-areas/index.html @@ -124,7 +124,7 @@ grid-template-areas: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 546a42ed31..15278dec92 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -150,7 +150,7 @@ grid-template-columns: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index e4343f33b6..0a0d5ec229 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -139,7 +139,7 @@ grid-template-rows: unset; <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"> +<section 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> diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index f400457ae7..d46d0121c6 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -130,7 +130,7 @@ grid: unset; <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"> +<section 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> diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html index 5f9739d1ae..d4a4a37361 100644 --- a/files/ru/web/css/minmax()/index.html +++ b/files/ru/web/css/minmax()/index.html @@ -132,7 +132,7 @@ minmax(auto, 300px) <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"> +<section 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> diff --git a/files/ru/web/css/overscroll-behavior/index.html b/files/ru/web/css/overscroll-behavior/index.html index 58377262db..38acf1ffba 100644 --- a/files/ru/web/css/overscroll-behavior/index.html +++ b/files/ru/web/css/overscroll-behavior/index.html @@ -7,7 +7,7 @@ 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> +<p><span class="seoSummary">CSS-свойство <strong><code>overscroll-behavior</code></strong> — это сокращение для свойств {{cssxref("overscroll-behavior-x")}} и {{cssxref("overscroll-behavior-y")}}, которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.</span></p> <pre class="brush:css no-line-numbers">/* Значения-ключевые слова */ overscroll-behavior: auto; /* по умолчанию */ @@ -23,40 +23,40 @@ 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>По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)</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>В некоторых случаях такое поведение нежелательно. Вы можете использовать <code>overscroll-behavior</code>, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.</p> <p>{{cssinfo}}</p> -<h2 id="Syntax">Syntax</h2> +<h2 id="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>Свойство <code>overscroll-behavior</code> задаётся в виде одного или двух ключевых слов, выбранных из списка значений ниже.</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> +<p>Два ключевых слова определяют значение <code>overscroll-behavior</code> по осям <code>x</code> и <code>y</code> соответственно. Если задано только одно значение, то предполагается, что и <code>x</code>, и <code>y</code> одинаковы.</p> -<h3 id="Values">Values</h3> +<h3 id="Values">Значения</h3> <dl> <dt><code>auto</code></dt> - <dd>The default scroll overflow behavior occurs as normal.</dd> + <dd>Поведение по умолчанию.</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> + <dd>Поведение для <code>overscroll-behavior</code> применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.</dd> <dt><code>none</code></dt> - <dd>No scroll chaining occurs to neighbouring scrolling areas, and default scroll overflow behavior is prevented.</dd> + <dd>Не происходит цепочки прокрутки в соседних областях прокрутки, и по умолчанию предотвращается достижение границы области прокрутки.</dd> </dl> -<h3 id="Formal_syntax">Formal syntax</h3> +<h3 id="Formal_syntax">Формальный синтаксис</h3> {{csssyntax}} -<h2 id="Examples">Examples</h2> +<h2 id="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>В нашем примере <a href="https://mdn.github.io/css-examples/overscroll-behavior/">overscroll-поведения</a> (см. также код по ссылке <a href="https://github.com/mdn/css-examples/tree/master/overscroll-behavior"></a>) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.</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> +<p>Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя <code>overscroll-behavior-y</code> (<code>overscroll-behavior</code> также подойдет) для окна чата, как показано ниже: </p> <pre class="brush: css">.messages { height: 220px; @@ -64,16 +64,16 @@ overflow: unset; 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> +<p>Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента {{htmlelement("body")}} значение <code>overscroll-behavior: none</code>:</p> <pre class="brush: css">body { margin: 0; overscroll-behavior: none; }</pre> -<h2 id="Specifications">Specifications</h2> +<h2 id="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> +<p>Пока CSSWG не опубликует свой собственный вариант, спецификация может быть найдена только<a href="https://wicg.github.io/overscroll-behavior/">на Github в репозитории WICG</a>.</p> <table class="standard-table"> <thead> @@ -98,7 +98,7 @@ overflow: unset; <p>{{Compat("css.properties.overscroll-behavior")}}</p> -<h2 id="See_also">See also</h2> +<h2 id="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> diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index b795b6435d..c75944e603 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -203,7 +203,7 @@ span { <p>... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.</p> <div> -<p>Общее использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.</p> +<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> diff --git a/files/ru/web/html/element/meta/index.html b/files/ru/web/html/element/meta/index.html index f7c23bfe53..0a9dc58d64 100644 --- a/files/ru/web/html/element/meta/index.html +++ b/files/ru/web/html/element/meta/index.html @@ -103,8 +103,8 @@ translation_of: Web/HTML/Element/meta <dt><code>"refresh"</code></dt> <dd>Эта прагма определяет: <ul> - <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только положительный целочисленный номер;</li> - <li>Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит положительный целочисленный номер, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li> + <li>Количество секунд перезагрузки таблицы, если {{htmlattrxref("content", "meta")}} атрибут содержит только целое положительное число;</li> + <li>Время, в количестве секунд, за которое страница должна быть перенаправлена на другую, если {{htmlattrxref("content", "meta")}} атрибут содержит целое положительное число, заканчивающийся строкой '<code>;url=</code>' и корректный URL.</li> </ul> </dd> <dt><code>"set-cookie"</code> {{obsolete_inline}}</dt> @@ -270,12 +270,12 @@ translation_of: Web/HTML/Element/meta <tbody> <tr> <td><code>width</code></td> - <td>положительный целочисленный номер или литерал <code>device-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>целое положительное число или литерал <code>device-height</code></td> <td>Определяет высоту области просмотра в пикселях</td> </tr> <tr> diff --git a/files/ru/web/html/element/template/index.html b/files/ru/web/html/element/template/index.html index 10b94c2864..e6ead297ab 100644 --- a/files/ru/web/html/element/template/index.html +++ b/files/ru/web/html/element/template/index.html @@ -1,21 +1,32 @@ --- -title: <template> +title: '<template>: элемент шаблона контента' slug: Web/HTML/Element/template tags: - Элемент + - HTML + - HTML Веб-компоненты + - HTML:Основной поток + - HTML:Метаданные + - HTML:Фразовый контент + - HTML:Элементы поддержки скриптов + - Справочник + - Шаблон + - Веб + - Веб-компоненты translation_of: Web/HTML/Element/template +browser-compat: html.elements.template --- <div>{{HTMLRef}}</div> -<p><span class="seoSummary"><strong>HTML элемент контент шаблона <code><template></code></strong> - это механизм для отложенного создания клиентского контента, который не отображается во время загрузки, но может быть инициализирован при помощи JavaScript.</span></p> +<p><a href="/en-US/docs/Web/HTML">HTML</a>-элемент шаблона контента <strong><code><template></code></strong> — это механизм для отложенного создания клиентского контента, который не отображается во время загрузки страницы, но может быть инициализирован при помощи JavaScript.</p> -<p>Шаблон можно представить себе как фрагмент контента, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <code><template></code> во время загрузки страницы, он делает это только чтобы убедиться в валидности содержимого; само содержимое при этом не отображается.</p> +<p>Шаблон можно представить себе как фрагмент контента страницы, сохранённый для последующего использования в документе. Хотя парсер и обрабатывает содержимое элемента <strong><code><template></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#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> + <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#phrasing_content">фразовый контент</a>, <a href="/en-US/docs/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a></td> </tr> <tr> <th scope="row">Допустимый контент</th> @@ -27,7 +38,7 @@ translation_of: Web/HTML/Element/template </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> + <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/Web/Guide/HTML/Content_categories#элементы_поддержки_скриптов">элементы поддержки скриптов</a>. Допускается вкладывать элемент в {{HTMLElement("colgroup")}}, у которого <em>отсутствует</em> атрибут {{htmlattrxref("span", "colgroup")}}.</td> </tr> <tr> <th scope="row">Неявные роли ARIA</th> @@ -44,13 +55,13 @@ translation_of: Web/HTML/Element/template </tbody> </table> -<h2 id="Атрибуты">Атрибуты</h2> +<h2 id="Attributes">Атрибуты</h2> <p>Элемент может иметь <a href="/en-US/docs/Web/HTML/Global_attributes">общие атрибуты</a>.</p> -<p>Также есть доступный только для чтения атрибут <code>content</code>, который предоставляет доступ к содержимому шаблона. Проверка на наличие этого атрибута является распространённым способом определить, поддерживает ли браузер элемент <code><template></code>.</p> +<p>Однако у <code>{{domxref("HTMLTemplateElement")}}</code> есть свойство <code>{{domxref("HTMLTemplateElement.content", "content")}}</code>, которое возвращает доступный только для чтения <code>{{domxref("DocumentFragment")}}</code>, содержащий DOM-поддерево шаблона. Обратите внимание, что прямое использование значения <code>{{domxref("HTMLTemplateElement.content", "content")}}</code> может привести к непредсказуемому поведению, см. раздел <a href="#avoiding_documentfragment_pitfall">ловушка <code>DocumentFragment</code></a> ниже.</p> -<h2 id="Примеры">Примеры</h2> +<h2 id="Examples">Примеры</h2> <p>Начнём с HTML.</p> @@ -62,7 +73,7 @@ translation_of: Web/HTML/Element/template </tr> </thead> <tbody> - <!-- existing data could optionally be included here --> + <!-- данные будут вставлены сюда --> </tbody> </table> @@ -74,40 +85,42 @@ translation_of: Web/HTML/Element/template </template> </pre> -<p>Для начала у нас есть таблица, в которую мы собираемся вставить содержимое с помощью Javascript кода. Затем следует шаблон, который описывает структуру HTML фрагмента представляющего одну строку таблицы</p> +<p>Для начала у нас есть таблица, в которую мы собираемся вставить контент с помощью Javascript. За таблицей следует шаблон, который описывает структуру HTML-фрагмента — строку таблицы.</p> -<p>Теперь, когда таблица была создана и шаблон определён, мы используем JavaScript чтобы вставить строки в таблицу. Каждая строка строится с использованием шаблона.</p> +<p>Теперь, когда таблица была создана, а шаблон определён, используем JavaScript, чтобы вставить строки в таблицу. Каждая строка будет строиться по шаблону.</p> -<pre class="brush:js;">// Проверяем поддерживает ли браузер тег <template> -// проверив наличие атрибута content у элемента template +<pre class="brush:js;">// Убеждаемся, что браузер поддерживает тег <template>, +// проверив наличие атрибута 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"); + // Находим элемент tbody таблицы + // и шаблон строки + var tbody = document.querySelector("tbody"); + var template = document.querySelector('#productrow'); + + // Клонируем новую строку и вставляем её в таблицу + var clone = template.content.cloneNode(true); + var td = clone.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); + tbody.appendChild(clone); - // создаём новую строку + // Клонируем новую строку ещё раз и вставляем её в таблицу + var clone2 = template.content.cloneNode(true); + td = clone2.querySelectorAll("td"); td[0].textContent = "0384928528"; - td[1].textContent = "Acme Kidney Beans"; + td[1].textContent = "Acme Kidney Beans 2"; - // клонируем новую строку и вставляем её в таблицу - var clone2 = document.importNode(t.content, true); - tb[0].appendChild(clone2); + tbody.appendChild(clone2); } else { - // необходимо найти другой способ добавить строку в таблицу т.к. - // тег <template> не поддерживается браузером + // Иной способ заполнить таблицу, потому что + // HTML-элемент template не поддерживается. } </pre> -<p>Как результат имеем HTML таблицу с двумя новыми строками добавленными с помощью JavaScript:</p> +<p>Как результат имеем HTML-таблицу с двумя новыми строками, добавленными с помощью JavaScript:</p> <div class="hidden"> <pre class="brush: css">table { @@ -118,39 +131,56 @@ table td { }</pre> </div> -<p>{{EmbedLiveSample("Example", 500, 120)}}</p> +<p>{{EmbedLiveSample("Examples", 500, 120)}}</p> -<h2 id="Specifications" name="Specifications">Спецификации</h2> +<h2 id="Avoiding_DocumentFragment_pitfall">Ловушка <code>DocumentFragment</code></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> +<p>{{domxref("DocumentFragment")}} не подходит в качестве целевого объекта для многих событий, поэтому предпочтительнее клонировать или ссылаться на элементы внутри него.</p> + +<p>Рассмотрим следующие HTML-разметку и JavaScript-код:</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div id="container"></div> + +<template id="template"> + <div>Click me</div> +</template></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const container = document.getElementById("container"); +const template = document.getElementById("template"); + +function clickHandler(event) { + event.target.append(" — Clicked this div"); +} + +const firstClone = template.content.cloneNode(true); +firstClone.addEventListener("click", clickHandler); +container.appendChild(firstClone); + +const secondClone = template.content.firstElementChild.cloneNode(true); +secondClone.addEventListener("click", clickHandler); +container.appendChild(secondClone);</pre> + +<h3 id="Result">Результат</h3> + +<p>В переменной <code>firstClone</code> у нас экземпляр (клон) <code>DocumentFragment</code>, и хотя у нас получилось отрисовать его внутри контейнера, клик по нему не срабатывает. В переменной <code>secondClone</code> у нас экземпляр (клон) <code>{{domxref("HTMLDivElement")}}</code>, клик по которому работает как ожидается.</p> + +<p>{{EmbedLiveSample('Avoiding_DocumentFragment_pitfall')}}</p> -<h2 id="Совместимость_браузера">Совместимость браузера</h2> +<h2 id="Specifications">Спецификации</h2> +<p>{{Specifications}}</p> +<h2 id="Browser_compatibility">Совместимость с браузерами</h2> -<p>{{Compat("html.elements.template")}}</p> +<p>{{Compat}}</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> + <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/http/headers/etag/index.html b/files/ru/web/http/headers/etag/index.html index bae3098460..17ebcfdebc 100644 --- a/files/ru/web/http/headers/etag/index.html +++ b/files/ru/web/http/headers/etag/index.html @@ -6,7 +6,7 @@ original_slug: Web/HTTP/Заголовки/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><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> diff --git a/files/ru/web/index.html b/files/ru/web/index.html index 2f9e882a5d..e084f7e316 100644 --- a/files/ru/web/index.html +++ b/files/ru/web/index.html @@ -6,7 +6,7 @@ tags: - Web translation_of: Web --- -<section id="Quick_Links"> +<section id="Quick_links"> <ol> <li><strong><a href="/ru/docs/Web">Веб-технологии для разработчиков </a></strong></li> <li class="toggle"> 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 index 8a396c6eee..ea19c9d8f2 100644 --- a/files/ru/web/javascript/reference/global_objects/string/match/index.html +++ b/files/ru/web/javascript/reference/global_objects/string/match/index.html @@ -53,21 +53,21 @@ translation_of: Web/JavaScript/Reference/Global_Objects/String/match <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; +<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', +// выведет [ 'Смотри главу 3.4.5.1', +// 'главу 3.4.5.1', // '.1', // index: 0, -// input: 'Глава 3.4.5.1 содержит дополнительную информацию' ] +// input: 'Смотри главу 3.4.5.1 для дополнительной информации' ] -// 'Глава 3.4.5.1' - это первое сопоставление и первое значение, -// сопоставленное с группой `(Глава \d+(\.\d)*)`. -// '.1' - это последнее значение, сопоставленное с группой `(\.\d)`. +// 'Смотри главу 3.4.5.1' - это полное сопоставление +// 'главу 3.4.5.1' - первое значение, сопоставленное с группой "(главу \d+(\.\d)*)". +// '.1' - это последнее значение, сопоставленное с группой "(\.\d)". // Свойство 'index' содержит значение (0) индекса совпадения // относительно начала сопоставления // Свойство 'input' содержит значение введённой строки.</pre> 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 index 1b0876d01f..011ab8be61 100644 --- a/files/ru/web/javascript/reference/statements/for-await...of/index.html +++ b/files/ru/web/javascript/reference/statements/for-await...of/index.html @@ -27,7 +27,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of <dd>Объект, чьи итерируемые свойства будут повторяться.</dd> </dl> -<h3 id="Итерирование_по_асинхронным_переменным"><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным переменным</span></h3> +<h3 id="Итерирование_по_асинхронным_переменным">Итерирование по асинхронным переменным</h3> <p>Вы также можете перебрать объект, который явно реализует асинхронный итерируемый протокол.</p> @@ -57,7 +57,7 @@ translation_of: Web/JavaScript/Reference/Statements/for-await...of // 2 </pre> -<h3 id="Итерирование_по_асинхронным_генераторам."><span style="background-color: #333333; letter-spacing: -0.00278rem;">Итерирование по асинхронным генераторам.</span></h3> +<h3 id="Итерирование_по_асинхронным_генераторам.">Итерирование по асинхронным генераторам</h3> <p>Поскольку асинхронные генераторы реализуют асинхронный протокол Iterator, по ним можно пройти циклом с помощью <code>for await... of</code></p> diff --git a/files/ru/web/performance/animation_performance_and_frame_rate/index.html b/files/ru/web/performance/animation_performance_and_frame_rate/index.html index 8ccf7fb88d..0d0688c535 100644 --- a/files/ru/web/performance/animation_performance_and_frame_rate/index.html +++ b/files/ru/web/performance/animation_performance_and_frame_rate/index.html @@ -65,7 +65,11 @@ original_slug: Web/Performance/Производительность_анимац <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> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout.png" loading="lazy" width="244" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52"> + </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> @@ -78,7 +82,11 @@ original_slug: Web/Performance/Производительность_анимац <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> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint.png" loading="lazy" width="246" height="52"> + </td> <td> <p><code><a href="/en-US/docs/Web/CSS/color">color</a></code></p> </td> @@ -87,7 +95,11 @@ original_slug: Web/Performance/Производительность_анимац <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> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/recalculate-style.png" loading="lazy" width="246" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/layout-faint.png" loading="lazy" width="246" height="52"> + <img alt="" src="/en-US/docs/Web/Performance/Animation_performance_and_frame_rate/paint-faint.png" loading="lazy" width="246" height="52"> + </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> @@ -100,7 +112,7 @@ original_slug: Web/Performance/Производительность_анимац <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>В этом разделе мы увидим, как инструмент <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> @@ -168,7 +180,7 @@ original_slug: Web/Performance/Производительность_анимац <h4 id="Этапы_рендеринга_в_деталях_Waterfall_2">Этапы рендеринга в деталях (Waterfall)</h4> -<p>В этой секции мы видим объяснения тому, что fps значительно улучшился. Мы больше не тратим время на layout и перерисовку элементов. :</p> +<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> diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html index 7708cc7c6e..2fd01a765d 100644 --- a/files/ru/web/performance/fundamentals/index.html +++ b/files/ru/web/performance/fundamentals/index.html @@ -53,7 +53,7 @@ original_slug: Web/Performance/Основы <h3 id="Использование_энергии">Использование энергии</h3> -<p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление памяти опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p> +<p>Последний показатель, который нужно упомянуть - это потребление энергии. Подобно использованию памяти, пользователь чувствует потребление энергии опосредованно, отмечая время, через которое устройство начинает изменять воспринимаемую пользователем производительность (UPP). Для минимизации отрицательных эффектов использования энергии, мы должны делать систему экономной.</p> <p>Для примера, вспомните, как работают мобильные устройства: вы можете включить режим энергосбережения, когда отключаются другие системы. Но есть и более жёсткий режим, который включается автоматически, когда заряд уменьшается до 5% - система включает троттлинг процессора, замедляя выполнение всех инструкций.</p> @@ -61,7 +61,7 @@ original_slug: Web/Performance/Основы <h2 id="Оптимизация_платформы">Оптимизация платформы</h2> -<p>В этой секции приводится краткий обзор того, как Firefox/Gecko вкладывается в производительность в целом, не заостряя внимание на конкретных приложениях. Для разработчиков и пользователей это будет вопрос на ответ "Как платформа помогает мне?".</p> +<p>В этой секции приводится краткий обзор того, как Firefox/Gecko вкладывается в производительность в целом, не заостряя внимание на конкретных приложениях. Для разработчиков и пользователей это будет ответ на вопрос "Как платформа помогает мне?".</p> <h3 id="Web_технологии">Web технологии</h3> diff --git a/files/ru/web/performance/how_browsers_work/index.html b/files/ru/web/performance/how_browsers_work/index.html index 27820e7dc2..9f7009e974 100644 --- a/files/ru/web/performance/how_browsers_work/index.html +++ b/files/ru/web/performance/how_browsers_work/index.html @@ -25,7 +25,7 @@ translation_of: Web/Performance/How_browsers_work <p>Две главных проблемы в производительности - это проблема скорости сети и проблема однопоточности браузеров.</p> -<p>Сетевые задержи - это главная проблема, которую нужно преодолеть при достижении быстрой загрузки. Чтобы ускорить загрузку разработчик должен посылать запрошенные данные как можно быстрее или, на худой конец, сделать вид, что они отправляются очень быстро. Сетевые задержки - это время, которое требуется для передачи данных от источника к браузеру. Производительность здесь - это то, что делает загрузку страницу как можно более скорой.</p> +<p>Сетевые задержки - это главная проблема, которую нужно преодолеть для достижения быстрой загрузки. Чтобы ускорить загрузку разработчик должен посылать запрошенные данные как можно быстрее или, на худой конец, сделать вид, что они отправляются очень быстро. Сетевые задержки - это время, которое требуется для передачи данных от источника к браузеру. Производительность здесь - это то, что делает загрузку страниц как можно более быстрой.</p> <p>В большинстве своём браузеры рассматриваются как однопоточные приложения. Чтобы достичь плавности взаимодействия, разработчик должен обеспечивать производительность во всём, начиная от плавного скроллинга, до быстрой реакции на нажатие экрана. Время рендера - это ключевое понятие. Разработчик должен обеспечить такую работу приложения, чтобы все его задачи могли быть выполнены достаточно быстро. В таком случае процессор будет свободен для обработки пользовательского ввода. Для решения проблемы однопоточности вы должны понять природу браузеров и научиться разгружать основной поток процесса там, где это возможно и допустимо.</p> 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 index e64a560d4a..c835de03fc 100644 --- a/files/ru/web/performance/how_long_is_too_long/index.html +++ b/files/ru/web/performance/how_long_is_too_long/index.html @@ -17,7 +17,7 @@ translation_of: Web/Performance/How_long_is_too_long <p>Как правило, первый ресурс, который получает клиент - это HTML документ, который затем делает запрос на загрузку остальных ресурсов. Как было подмечено в <a href="/ru/docs/Web/Performance/Critical_rendering_path">статье о критическом пути рендеринга</a> - как только браузер получает данные, он сразу начинает их обработку, вместо того, чтобы дожидаться загрузки всех ресурсов.</p> -<p>Да, одна секунда на загрузку - это хорошая цель. Но лишь немногие приложения достигают этой скорости. Всё зависит от ожиданий. Например, от приложения "Hello World", работающего в корпоративной (локальной) сети, будет ожидаться загрузка за миллисекунды. Пользователь из северной Сибири, пользующийся Edge-мобильной сетью и устройством 5-летней давности, вероятно, посчитает даже 20-секундную загрузку быстрой. Однако, в среднем, если вы позволяете приложению не отвечать на запрос 3 или 4 секунды, вы, вероятно, потеряете пользователя. И, что ещё хуже, этот пользователь вряд ли вернётся к вам в ближайшее время.</p> +<p>Да, одна секунда на загрузку — это хорошая цель. Но лишь немногие приложения достигают этой скорости. Всё зависит от ожиданий. Например, от приложения «Hello World», работающего в корпоративной (локальной) сети, будет ожидаться загрузка за миллисекунды. Пользователь из северной Сибири, пользующийся EDGE-мобильной сетью и устройством 5-летней давности, вероятно, посчитает даже 20-секундную загрузку быстрой. Однако, в среднем, если вы позволяете приложению не отвечать на запрос 3 или 4 секунды, вы, вероятно, потеряете пользователя. И, что ещё хуже, этот пользователь вряд ли вернётся к вам в ближайшее время.</p> <p>В деле оптимизации производительности рекомендуется обозначить амбициозные задачи по первичной загрузке контента. Например, 5 секунд для 3G сетей и 1.5 секунды для офисного Т1 канала. Для навигации внутри приложения цели должны быть ещё строже. К счастью, для оптимизации можно использовать Service Workers и кеширование.</p> diff --git a/files/ru/web/performance/optimizing_startup_performance/index.html b/files/ru/web/performance/optimizing_startup_performance/index.html index 4325eeab62..a2b6fbcd0f 100644 --- a/files/ru/web/performance/optimizing_startup_performance/index.html +++ b/files/ru/web/performance/optimizing_startup_performance/index.html @@ -9,19 +9,19 @@ translation_of: Web/Performance/Optimizing_startup_performance <h2 id="Приятный_запуск">Приятный запуск</h2> -<p>Не имеет значения, какую платформу вы используете, всегда будет правильным обеспечить как можно более быструю загрузку приложения. Так как это наиболее общая проблема, мы не будем заострять на ней внимание здесь. Однако, мы обратим внимание на наибольшую проблему Web-приложений: синхронная загрузка ресурсов. Решением этой проблемы был бы максимальный переход на асинхронную загрузку ресурсов. Это означает, что инициализирующий код не должен запускаться в одно единственном обработчике событий в главном потоке процесса.</p> +<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>Вместо этого, вы можете разбить ваш код так, чтобы часть его обрабатывалась в <a href="/en-US/docs/DOM/Using_web_workers" title="/en-US/docs/DOM/Using_web_workers">Web worker</a>, что выделит его в отдельные фоновые неблокирующие треды (например, запросы данных и их обработка). Затем, все, что должно быть выполнено в основном потоке (например, пользовательские события или рендеринг интерфейса) должно быть разбито на небольшие кусочки так, чтобы обработчик браузера выполнял небольшие куски кода итеративно, а не за один подход. Это позволит вашему приложению выглядеть отзывчивым даже во время первоначальной загрузки.</p> -<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечно счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p> +<p>Почему так важно делать все это асинхронно? Помимо причин, перечисленных выше, подумайте о влиянии, которые оказывают зависшие приложения: пользователь не может отменить запуск, даже если он запустил приложение по ошибке. Если приложение запускается в браузере, пользователь даже не сможет закрыть вкладку. В конечном счёте это может привести даже к системным предупреждениям о "медленных скриптах" или "исчерпании памяти". А ведь было время, когда каждая вкладка не работала в отдельном процессе, как сейчас, а потому повисшая вкладка приводила к зависанию всего браузера! Вы должны не просто делать загрузку приложения "мягкой", но и давать пользователю знать о процессе загрузки: показывайте ему прогресс-бары или этапы, которые проходит приложение. Это позволит пользователю убедиться, что приложение не зависло.</p> <h3 id="Было_бы_желание...">Было бы желание...</h3> -<p>Если вы начинаете ваш проект с нуля, обычно очень легко начать писать код "правильно", делая все изначально асинхронным. Все вычисления при запуски должны выполняться в фоновых потоках, в то время как основной поток должен держаться максимально очищенным от лишних функций. Включайте индикатор прогресса для того, чтобы пользователь знал, что сейчас происходит и не думал, что приложение сломано. В теории, если вы только начинаете разработку приложения - это все должно быть очень просто.</p> +<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>И хотя вы можете использовать <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> diff --git a/files/ru/web/svg/attribute/shape-rendering/index.html b/files/ru/web/svg/attribute/shape-rendering/index.html index 5ec7870c81..61a64c3bac 100644 --- a/files/ru/web/svg/attribute/shape-rendering/index.html +++ b/files/ru/web/svg/attribute/shape-rendering/index.html @@ -5,7 +5,7 @@ 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> +<p>При создании SVG есть возможность указать браузеру, как рекомендуется рендерить (отрисовывать) элементы {{ SVGElement("path") }} или базовые фигуры. <code>shape-rendering</code> предоставляет возможность указывать данные рекомендации.</p> <h2 id="Контекст_использования">Контекст использования</h2> |