diff options
| author | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
|---|---|---|
| committer | Masahiro FUJIMOTO <mfujimot@gmail.com> | 2021-09-04 00:46:12 +0900 |
| commit | fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f (patch) | |
| tree | 51b7edfc370236684a203f4e69ae67bb7d24b549 /files/ru/web | |
| parent | 04ea4edc83cc12142ed151bbea2c65cffc8e76f6 (diff) | |
| parent | eeb07fe338cdc90092841d717919f46f9d9e3ff9 (diff) | |
| download | translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.gz translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.tar.bz2 translated-content-fe6f6abf2b7c497bf1f97f73a82dde7cf48eb79f.zip | |
Merge branch 'main' into 20210818-Glossary/Type
Diffstat (limited to 'files/ru/web')
48 files changed, 303 insertions, 238 deletions
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> |