From 9a96229818a3971444a77c238cc5ae45921db1bf Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Tue, 23 Mar 2021 21:32:09 +0300 Subject: Fix capitalization of Russian pronouns (#294) * Fix capitalization of Russian pronouns * Apply suggestions from code review Co-authored-by: Alexander Myshov * Update files/ru/web/mathml/element/math/index.html Co-authored-by: Alexander Myshov Co-authored-by: Alexander Myshov --- .../keyboard-navigable_javascript_widgets/index.html | 2 +- files/ru/web/api/attr/index.html | 2 +- .../audiocontext/createmediaelementsource/index.html | 6 +++--- files/ru/web/api/beforeunloadevent/index.html | 2 +- .../api/canvas_api/tutorial/basic_usage/index.html | 4 ++-- .../canvas_api/tutorial/drawing_shapes/index.html | 2 +- .../managing_screen_orientation/index.html | 4 ++-- files/ru/web/api/document/createrange/index.html | 2 +- files/ru/web/api/element/currentstyle/index.html | 2 +- .../web/api/eventtarget/addeventlistener/index.html | 6 +++--- files/ru/web/api/eventtarget/eventtarget/index.html | 2 +- files/ru/web/api/fetch_api/using_fetch/index.html | 2 +- files/ru/web/api/gamepadevent/gamepad/index.html | 2 +- .../using_the_geolocation_api/index.html | 2 +- .../web/api/globaleventhandlers/onclick/index.html | 4 ++-- files/ru/web/api/history/index.html | 4 ++-- files/ru/web/api/htmlaudioelement/audio/index.html | 2 +- files/ru/web/api/htmldialogelement/open/index.html | 2 +- .../web/api/htmlmediaelement/abort_event/index.html | 2 +- .../web/api/indexeddb_api/using_indexeddb/index.html | 4 ++-- files/ru/web/api/performance/index.html | 2 +- files/ru/web/api/pushmanager/subscribe/index.html | 2 +- .../using_server-sent_events/index.html | 2 +- .../using_service_workers/index.html | 8 ++++---- files/ru/web/api/speechrecognition/index.html | 2 +- files/ru/web/api/storage/key/index.html | 2 +- files/ru/web/api/storage_access_api/index.html | 2 +- files/ru/web/api/vrdisplay/requestpresent/index.html | 2 +- files/ru/web/api/web_audio_api/index.html | 2 +- .../visualizations_with_web_audio_api/index.html | 8 ++++---- .../using_the_web_storage_api/index.html | 2 +- files/ru/web/api/webvr_api/index.html | 2 +- .../web/api/webvr_api/using_the_webvr_api/index.html | 20 ++++++++++---------- files/ru/web/api/webxr_device_api/index.html | 2 +- .../ru/web/api/window/beforeunload_event/index.html | 2 +- files/ru/web/api/xmlhttprequest/timeout/index.html | 2 +- files/ru/web/css/_colon_where/index.html | 2 +- files/ru/web/css/align-content/index.html | 2 +- .../css_animations/using_css_animations/index.html | 10 +++++----- .../basic_concepts_of_flexbox/index.html | 2 +- .../mastering_wrapping_of_flex_items/index.html | 8 ++++---- .../basic_concepts_of_grid_layout/index.html | 6 +++--- .../css_grid_layout/grid_template_areas/index.html | 6 +++--- .../layout_using_named_grid_lines/index.html | 2 +- .../line-based_placement_with_css_grid/index.html | 16 ++++++++-------- .../relationship_of_grid_layout/index.html | 18 +++++++++--------- files/ru/web/css/filter/index.html | 4 ++-- .../css/media_queries/using_media_queries/index.html | 4 ++-- files/ru/web/css/text-shadow/index.html | 4 ++-- .../guide/css/block_formatting_context/index.html | 2 +- files/ru/web/guide/graphics/index.html | 2 +- files/ru/web/guide/index.html | 6 +++--- files/ru/web/guide/performance/index.html | 2 +- files/ru/web/guide/user_input_methods/index.html | 2 +- files/ru/web/html/element/a/index.html | 2 +- files/ru/web/html/element/code/index.html | 2 +- files/ru/web/html/element/img/index.html | 2 +- files/ru/web/html/element/input/date/index.html | 2 +- .../web/html/element/input/datetime-local/index.html | 6 +++--- files/ru/web/html/element/input/radio/index.html | 20 ++++++++++---------- files/ru/web/html/element/meta/index.html | 4 ++-- files/ru/web/html/element/picture/index.html | 2 +- files/ru/web/html/element/select/index.html | 2 +- files/ru/web/html/element/slot/index.html | 2 +- files/ru/web/html/element/title/index.html | 2 +- files/ru/web/html/preloading_content/index.html | 2 +- files/ru/web/http/headers/content-type/index.html | 2 +- files/ru/web/http/status/index.html | 2 +- files/ru/web/javascript/guide/functions/index.html | 14 +++++++------- .../web/javascript/guide/meta_programming/index.html | 2 +- .../javascript/guide/numbers_and_dates/index.html | 2 +- .../web/javascript/guide/using_promises/index.html | 2 +- files/ru/web/javascript/memory_management/index.html | 2 +- .../classes/private_class_fields/index.html | 2 +- .../errors/cant_assign_to_property/index.html | 2 +- .../errors/deprecated_source_map_pragma/index.html | 2 +- files/ru/web/javascript/reference/errors/index.html | 2 +- .../reference/errors/not_a_constructor/index.html | 6 +++--- .../javascript/reference/functions/get/index.html | 8 ++++---- .../global_objects/array/@@unscopables/index.html | 4 ++-- .../reference/global_objects/error/index.html | 2 +- .../reference/global_objects/map/set/index.html | 2 +- .../global_objects/regexp/@@search/index.html | 2 +- .../global_objects/symbol/search/index.html | 2 +- .../global_objects/symbol/unscopables/index.html | 4 ++-- .../reference/global_objects/typedarray/index.html | 2 +- .../global_objects/uint8clampedarray/index.html | 2 +- .../reference/global_objects/uneval/index.html | 2 +- .../javascript/reference/lexical_grammar/index.html | 2 +- .../reference/operators/addition/index.html | 2 +- .../operators/addition_assignment/index.html | 2 +- .../reference/operators/assignment/index.html | 2 +- .../javascript/reference/operators/delete/index.html | 6 +++--- .../reference/operators/optional_chaining/index.html | 2 +- .../javascript/reference/operators/this/index.html | 2 +- files/ru/web/manifest/display/index.html | 2 +- files/ru/web/mathml/element/math/index.html | 2 +- files/ru/web/mathml/examples/index.html | 2 +- files/ru/web/mathml/index.html | 4 ++-- files/ru/web/performance/fundamentals/index.html | 2 +- files/ru/web/svg/tutorial/getting_started/index.html | 2 +- files/ru/web/svg/tutorial/gradients/index.html | 4 ++-- files/ru/web/svg/tutorial/index.html | 4 ++-- files/ru/web/svg/tutorial/patterns/index.html | 6 +++--- .../web_components/using_custom_elements/index.html | 2 +- 105 files changed, 192 insertions(+), 192 deletions(-) (limited to 'files/ru/web') diff --git a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html index 4c7755c6a1..8a7a122fa9 100644 --- a/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html +++ b/files/ru/web/accessibility/keyboard-navigable_javascript_widgets/index.html @@ -136,7 +136,7 @@ translation_of: Web/Accessibility/Keyboard-navigable_JavaScript_widgets
  • изменить tabindex предыдущего элемента на -1
    • -

    По ссылке Вы можете увидеть пример WAI-ARIA tree view, использующий эту технику.

    +

    По ссылке вы можете увидеть пример WAI-ARIA tree view, использующий эту технику.

    Советы
    diff --git a/files/ru/web/api/attr/index.html b/files/ru/web/api/attr/index.html index 998cd4d512..5c36ec8b69 100644 --- a/files/ru/web/api/attr/index.html +++ b/files/ru/web/api/attr/index.html @@ -27,7 +27,7 @@ translation_of: Web/API/Attr

    Элемент, содержащий атрибут.

    -

    Примечание: DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку Вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввёл это свойство. 

    +

    Примечание: DOM уровень 4 удалил это свойство.Предполагалось, что, поскольку вы получаете объект Attr от {{domxref("Element")}}, вы заранее должны знать связанный элемент.  Поскольку это не верно в случаях, подобных объектам Attr, возвращаемым  {{domxref("Document.evaluate")}}, DOM уровень жизни вновь ввёл это свойство. 

    Gecko выводит предупреждение об использовании, начиная с Gecko 7.0 {{geckoRelease("7.0")}}. Это предупреждение было удалено в Gecko 49.0 (Firefox 49.0 / Thunderbird 49.0 / SeaMonkey 2.46).

    diff --git a/files/ru/web/api/audiocontext/createmediaelementsource/index.html b/files/ru/web/api/audiocontext/createmediaelementsource/index.html index 6693ef14dc..c0576ddc63 100644 --- a/files/ru/web/api/audiocontext/createmediaelementsource/index.html +++ b/files/ru/web/api/audiocontext/createmediaelementsource/index.html @@ -20,7 +20,7 @@ var source = audioCtx.createMediaElementSource(myMediaElement);
    myMediaElement
    -
    Объект {{domxref("HTMLMediaElement")}}, который Вы хотите использовать в качестве исходного звука.
    +
    Объект {{domxref("HTMLMediaElement")}}, который вы хотите использовать в качестве исходного звука.

    Возвращаемые значения

    @@ -29,10 +29,10 @@ var source = audioCtx.createMediaElementSource(myMediaElement);

    Пример

    -

    Простой пример создания аудио узла из элемента {{htmlelement("audio") }} используя createMediaElementSource(), и управления усилением звука через {{ domxref("GainNode") }} перед подачей в {{ domxref("AudioDestinationNode") }} для воспроизведения. При движении мыши вызывается функция updatePage(), вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом Вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.

    +

    Простой пример создания аудио узла из элемента {{htmlelement("audio") }} используя createMediaElementSource(), и управления усилением звука через {{ domxref("GainNode") }} перед подачей в {{ domxref("AudioDestinationNode") }} для воспроизведения. При движении мыши вызывается функция updatePage(), вычисляющая текущее усиление как отношение Y позиции курсора к общей высоте окна. Таким образом вы можете увеличивать/уменьшать громкость звучания аудио движениями мыши вверх/вниз.

    -

    Примечание: Вы можете также посмотреть демонстрацию или исходники.

    +

    Примечание: вы можете также посмотреть демонстрацию или исходники.

    var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
diff --git a/files/ru/web/api/beforeunloadevent/index.html b/files/ru/web/api/beforeunloadevent/index.html
index 768e7d2787..8fd6591080 100644
--- a/files/ru/web/api/beforeunloadevent/index.html
+++ b/files/ru/web/api/beforeunloadevent/index.html
@@ -56,7 +56,7 @@ window.addEventListener("beforeunload", function( event ) {
 
    Совместимость браузеров
    
 
 
    
-

    Значение переменной this внутри modifyText() при вызове событием клика будет равно ссылке на глобальный (window) объект (или undefined при использовании strict mode)

    -
    Note: В JavaScript 1.8.5 введён метод Function.prototype.bind() , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что Вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы Вы могли удалить его позже.
    +
    Note: В JavaScript 1.8.5 введён метод Function.prototype.bind() , который позволяет указать значение, которое должно быть использовано для всех вызовов данной функции. Он позволяет вам легко обходить ситуации, в которых не ясно, чему будет равно this, в зависимости от того, в каком контексте будет вызвана ваша функция. заметьте, также, что вам будет необходимо иметь внешнюю ссылку на обработчик, чтобы вы могли удалить его позже.

    Пример с использованием bind и без него:

    @@ -256,7 +256,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false); } -

    Проблема в примере выше заключается в том, что Вы не можете удалить обработчик, вызванный с bind. Другое решение использует специальную функцию handleEvent, чтобы перехватывать любые события:

    +

    Проблема в примере выше заключается в том, что вы не можете удалить обработчик, вызванный с bind. Другое решение использует специальную функцию handleEvent, чтобы перехватывать любые события:

    var Something = function(element) {
   this.name = 'Something Good';
@@ -297,7 +297,7 @@ el.addEventListener("click", () => { modifyText("four"); }, false);

    Совместимость

    -

    Вы можете обойти методы addEventListener, removeEventListener, Event.preventDefault и Event.stopPropagation не поддерживаемы в IE 8 используя следующий код в начале Вашего скрипта. Этот код поддерживает использование handleEvent и события DOMContentLoaded.

    +

    Вы можете обойти методы addEventListener, removeEventListener, Event.preventDefault и Event.stopPropagation не поддерживаемы в IE 8 используя следующий код в начале вашего скрипта. Этот код поддерживает использование handleEvent и события DOMContentLoaded.

    Note: useCapture не поддерживается, так как IE 8 не имеет альтернативного метода для этого. Также заметьте, что следующий код только добавляет поддержку IE 8. Также, он работает только при соблюдении стандартов: объявление DOCTYPE страницы обязательно.

    diff --git a/files/ru/web/api/eventtarget/eventtarget/index.html b/files/ru/web/api/eventtarget/eventtarget/index.html index d14742cf32..1763d30980 100644 --- a/files/ru/web/api/eventtarget/eventtarget/index.html +++ b/files/ru/web/api/eventtarget/eventtarget/index.html @@ -62,7 +62,7 @@ let newValue = myEventTarget.secret; // == 7

    Совместимость браузеров

    - +

    {{Compat("api.EventTarget.EventTarget")}}

    diff --git a/files/ru/web/api/fetch_api/using_fetch/index.html b/files/ru/web/api/fetch_api/using_fetch/index.html index 2302fa8568..f64391a1bf 100644 --- a/files/ru/web/api/fetch_api/using_fetch/index.html +++ b/files/ru/web/api/fetch_api/using_fetch/index.html @@ -311,7 +311,7 @@ console.log(myHeaders.get("X-Custom-Header")); // [ ]
    -

    Примечание: Вы не можете добавить или установить request защищаемые Headers’ заголовок Content-Length. Аналогично, вставка Set-Cookie в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.

    +

    Примечание: вы не можете добавить или установить request защищаемые Headers’ заголовок Content-Length. Аналогично, вставка Set-Cookie в заголовок ответа недопустимо: ServiceWorkers не допускают установки cookies через синтезированные ответы.

    Объекты ответа

    diff --git a/files/ru/web/api/gamepadevent/gamepad/index.html b/files/ru/web/api/gamepadevent/gamepad/index.html index 903e5e0916..b44acec436 100644 --- a/files/ru/web/api/gamepadevent/gamepad/index.html +++ b/files/ru/web/api/gamepadevent/gamepad/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/GamepadEvent/gamepad

    Свойство GamepadEvent.gamepad, интерфейса {{domxref("GamepadEvent")}}, возвращает объект {{domxref("Gamepad")}}, предоставляющий доступ к данным геймпада для событий gamepadconnected и gamepaddisconnected.

    -

    Примечание: Эти события не возникают Chrome, только в Firefox. В Chrome Вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.

    +

    Примечание: Эти события не возникают Chrome, только в Firefox. В Chrome вы должны использовать {{domxref("Navigator.getGamepads")}} для доступа к объекту {{domxref("Gamepad")}}.

    Синтаксис

    diff --git a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html index 58ee18af30..57276f7862 100644 --- a/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html +++ b/files/ru/web/api/geolocation_api/using_the_geolocation_api/index.html @@ -44,7 +44,7 @@ original_slug: Web/API/Geolocation/Using_geolocation/Using_the_Geolocation_API

    Если данные о местоположении меняются (либо устройство находится в движении, либо пришли более точные данные о геопозиции), вы можете указать callback функцию, которая будет вызывается при любом обновлении данных о местоположении. Это делается с использованием функции {{domxref("Geolocation.watchPosition()","watchPosition()")}}, которая имеет несколько входных параметров: {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}. Эта функция вызывается много раз, позволяя браузеру обновлять данные о текущей локации либо во время движения, либо после получения более точной информации о местоположении (после применения более точных приёмов). Функция, которая вызывается при ошибке, для {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}, при желании, может быть вызвана неоднократно.

    -

    Примечание: Вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

    +

    Примечание: вы можете использовать {{domxref("Geolocation.watchPosition()","watchPosition()")}} без вызова {{domxref("Geolocation.getCurrentPosition()","getCurrentPosition()")}}.

    var watchID = navigator.geolocation.watchPosition(function(position) {
diff --git a/files/ru/web/api/globaleventhandlers/onclick/index.html b/files/ru/web/api/globaleventhandlers/onclick/index.html
index 806b0270c2..47724b1f9d 100644
--- a/files/ru/web/api/globaleventhandlers/onclick/index.html
+++ b/files/ru/web/api/globaleventhandlers/onclick/index.html
@@ -54,7 +54,7 @@ translation_of: Web/API/GlobalEventHandlers/onclick
 </html>
    -

    Или же Вы можете использовать анонимную функцию, как здесь:

    +

    Или же вы можете использовать анонимную функцию, как здесь:

    p.onclick = function(event) { alert("moot!"); };
    @@ -63,7 +63,7 @@ translation_of: Web/API/GlobalEventHandlers/onclick

    Событие click возникает, когда пользователь кликает на элемент. Событие click возникнет после событий mousedown и mouseup.

    -

    С данным свойством только один обработчик события click может быть назначен объекту. Возможно, вместо данного метода, Вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.

    +

    С данным свойством только один обработчик события click может быть назначен объекту. Возможно, вместо данного метода, вам стоит обратить внимание на метод {{domxref("EventTarget.addEventListener()")}}, т.к. он более гибкий и является частью спецификации DOM Events.

    Спецификация

    diff --git a/files/ru/web/api/history/index.html b/files/ru/web/api/history/index.html index 404fc1eb5c..cb591aa349 100644 --- a/files/ru/web/api/history/index.html +++ b/files/ru/web/api/history/index.html @@ -42,14 +42,14 @@ translation_of: Web/API/History

    Загружает страницу из истории сессии, определяя её положение относительно текущей страницы, например: -1 для предыдущей страницы или 1 для следующей страницы. Когда integerDelta выходит за предел (например, -1, когда нет ранее посещённых страниц в истории сессии), метод не делает ничего, и не вызывает исключение. Вызов Go () без параметров или с не целочисленным аргументом не имеет никакого эффекта (в отличие от Internet Explorer, который поддерживает строки URL в качестве аргумента).

    {{domxref("History.pushState()")}} {{ gecko_minversion_inline("2.0") }}
    -
    Помещает полученные данные в стек истории сессии с определённым заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера. +
    Помещает полученные данные в стек истории сессии с определённым заголовком и, при наличии , URL. Данные рассматриваются DOM как непрозрачные; вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера.
    Примечание: В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по алгоритму структурированного клонирования. Он позволяет передавать более широкое разнообразие объектов.
    {{domxref("History.replaceState()")}} {{ gecko_minversion_inline("2.0") }}
    -
    Обновляет последнюю запись в стеке истории содержащий определённые данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; Вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера. +
    Обновляет последнюю запись в стеке истории содержащий определённые данные, заголовок и, при наличии, URL. Данные рассматриваются DOM как непрозрачные; вы можете задать любой объект JavaScript, который может быть сериализован. Обратите внимание, что в настоящее время Firefox игнорирует параметр заголовка; для получения дополнительной информации см. управление историей браузера.
    Примечание: В Gecko 2.0 {{ geckoRelease("2.0") }} до Gecko 5.0 {{ geckoRelease("5.0") }}, передаваемый объект сериарилизовался в JSON. Начиная с Gecko 6.0 {{ geckoRelease("6.0") }}, объект обрабатывается по алгоритму структурированного клонирования. Он позволяет передавать более широкое разнообразие объектов.
    diff --git a/files/ru/web/api/htmlaudioelement/audio/index.html b/files/ru/web/api/htmlaudioelement/audio/index.html index df1406bca2..ac1ae1c17d 100644 --- a/files/ru/web/api/htmlaudioelement/audio/index.html +++ b/files/ru/web/api/htmlaudioelement/audio/index.html @@ -74,7 +74,7 @@ original_slug: Web/API/HTMLAudioElement/Audio()

    Поддержка браузерами

    -

    Таблица совместимости на этой странице генерируется из структурированных данных. Если Вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам Pull-запрос.

    +

    Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите https://github.com/mdn/browser-compat-data и отправьте нам Pull-запрос.

    {{Compat("api.HTMLAudioElement.Audio")}}

    diff --git a/files/ru/web/api/htmldialogelement/open/index.html b/files/ru/web/api/htmldialogelement/open/index.html index 7e27ba5aab..28a6c8f812 100644 --- a/files/ru/web/api/htmldialogelement/open/index.html +++ b/files/ru/web/api/htmldialogelement/open/index.html @@ -86,7 +86,7 @@ var myOpenValue = dialogInstance.open; </script>
    -

    Примечание: Вы можете найти данный пример на htmldialogelement-basic (see it live also).

    +

    Примечание: вы можете найти данный пример на htmldialogelement-basic (see it live also).

    Спецификации

    diff --git a/files/ru/web/api/htmlmediaelement/abort_event/index.html b/files/ru/web/api/htmlmediaelement/abort_event/index.html index 572d6655e9..c15e34e970 100644 --- a/files/ru/web/api/htmlmediaelement/abort_event/index.html +++ b/files/ru/web/api/htmlmediaelement/abort_event/index.html @@ -66,7 +66,7 @@ video.appendChild(source);

    Совместимость с браузерами

    - +

    {{Compat("api.HTMLMediaElement.abort_event")}}

    diff --git a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html index cc7345e92b..be4dcb0285 100644 --- a/files/ru/web/api/indexeddb_api/using_indexeddb/index.html +++ b/files/ru/web/api/indexeddb_api/using_indexeddb/index.html @@ -12,7 +12,7 @@ translation_of: Web/API/IndexedDB_API/Using_IndexedDB

    Это руководство по использованию асинхронного API для IndexedDB. Если вы не знакомы с IndexedDB, то обратитесь для начала к документу Basic Concepts About IndexedDB. .

    -
    Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее Вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.
    +
    Некоторые части документа не переведены, в основном это повсеместно принятые в программировании рекомендации, такие как обработка ошибок или что-то очевидное. Тем не менее вы можете/должны продолжить перевод. Главная цель перевода - понять основные концепции IndexedDB, обратить внимание на важные нюансы, прокомментировать исходный код и может быть добавить примеры.

    Справочную документацию по IndexedDB API вы найдёте в документе IndexedDB. В нем описаны типы объектов, используемых в IndexedDB, а также синхронный и асинхронный API.

    @@ -99,7 +99,7 @@ request.onsuccess = function(event) { 
    var db;
 var request = indexedDB.open("MyTestDatabase");
 request.onerror = function(event) {
-  alert("Почему Вы не позволяете моему веб-приложению использовать IndexedDB?!");
+  alert("Почему вы не позволяете моему веб-приложению использовать IndexedDB?!");
 };
 request.onsuccess = function(event) {
   db = event.target.result;
diff --git a/files/ru/web/api/performance/index.html b/files/ru/web/api/performance/index.html
index 47d7221e51..473fafc0ad 100644
--- a/files/ru/web/api/performance/index.html
+++ b/files/ru/web/api/performance/index.html
@@ -16,7 +16,7 @@ translation_of: Web/API/Performance
 
    Объект этого типа может быть получен в результате вызова атрибута {{domxref("Window.performance")}}, доступного только для чтения.
    
 
 
    
-
    Замечание: Этот интерфейс и его составляющие доступны в фоновых потоках выполнения, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса ещё не документированы (подробнее см. разделы документации Performance Timeline и User Timing). Также заметим, что временные метки производительности относятся к текущему контексту. Если Вы создадите метку в основном потоке (или в другом фоновом потоке), то её нельзя будет увидеть в другом фоновом потоке и наоборот.
    
+
    Замечание: Этот интерфейс и его составляющие доступны в фоновых потоках выполнения, за исключением случаев, перечисленных ниже. Заметим, что некоторые доступные части интерфейса ещё не документированы (подробнее см. разделы документации Performance Timeline и User Timing). Также заметим, что временные метки производительности относятся к текущему контексту. Если вы создадите метку в основном потоке (или в другом фоновом потоке), то её нельзя будет увидеть в другом фоновом потоке и наоборот.
    
 
    
 
 
    Свойства
    
diff --git a/files/ru/web/api/pushmanager/subscribe/index.html b/files/ru/web/api/pushmanager/subscribe/index.html
index 17926befd3..a970f48612 100644
--- a/files/ru/web/api/pushmanager/subscribe/index.html
+++ b/files/ru/web/api/pushmanager/subscribe/index.html
@@ -20,7 +20,7 @@ translation_of: Web/API/PushManager/subscribe
  
    Объект, содержащий необязательные параметры конфигурации. Может иметь следующие свойства:
  
      
   
    • userVisibleOnly: Булевое значение, указывающее на то, будет ли возвращаемая подписка использоваться для сообщений, чей эффект может быть видим для пользователя.
      • 
-  
    • applicationServerKey: открытый ключ ECDSA P-256, закодированный в Base64 {{domxref ('DOMString')}} или {{domxref ('ArrayBuffer')}}}, содержащий , который push-сервер будет использовать для аутентификации сервера приложений. Если указано, все сообщения с сервера Вашего приложения должны использовать схему аутентификации VAPID и включать JWT, подписанный соответствующим закрытым ключом. Этот ключ НЕ тот же ключ ECDH, который вы используете для шифрования данных. Для получения дополнительной информации см. «Using VAPID with WebPush».
      • 
+  
    • applicationServerKey: открытый ключ ECDSA P-256, закодированный в Base64 {{domxref ('DOMString')}} или {{domxref ('ArrayBuffer')}}}, содержащий , который push-сервер будет использовать для аутентификации сервера приложений. Если указано, все сообщения с сервера вашего приложения должны использовать схему аутентификации VAPID и включать JWT, подписанный соответствующим закрытым ключом. Этот ключ НЕ тот же ключ ECDH, который вы используете для шифрования данных. Для получения дополнительной информации см. «Using VAPID with WebPush».
      • 
  
    
 
  
    
diff --git a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
index bee580418a..bd35a39e6b 100644
--- a/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
+++ b/files/ru/web/api/server-sent_events/using_server-sent_events/index.html
@@ -82,7 +82,7 @@ while (1) {
 
    Приведённый выше код генерирует событие каждую секунду с типом события «ping». Данные каждого события - это объект JSON, содержащий метку времени ISO 8601, соответствующую дате, когда было сгенерировано событие. Через случайные интервалы отправляется простое сообщение (без типа event).
    
 
 
    
-
    Примечание: Вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. Simple SSE demo using PHP.
    
+
    Примечание: вы можете найти полный пример, который использует код, показанный в этой статье на GitHub - см. Simple SSE demo using PHP.
    
 
    
 
 
    Обработка ошибок
    
diff --git a/files/ru/web/api/service_worker_api/using_service_workers/index.html b/files/ru/web/api/service_worker_api/using_service_workers/index.html
index 9712ab58c2..b8dcf3657d 100644
--- a/files/ru/web/api/service_worker_api/using_service_workers/index.html
+++ b/files/ru/web/api/service_worker_api/using_service_workers/index.html
@@ -131,12 +131,12 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
    Все это происходит асинхронно.
    
 
 
    
-
    На заметку: Вы можете также объединять вызов нескольких промис-методов в одну цепочку, как в этом примере:
    
+
    На заметку: вы можете также объединять вызов нескольких промис-методов в одну цепочку, как в этом примере:
    
  myPromise().then(success, failure).then(success).catch(failure);
    
 
    
 
 
    
-
    На заметку: Вы можете получить гораздо больше информации о промисах, прочитав превосходную статью Джейка Арчибальда (Jake Archibald’s) JavaScript Promises: there and back again.
    
+
    На заметку: вы можете получить гораздо больше информации о промисах, прочитав превосходную статью Джейка Арчибальда (Jake Archibald’s) JavaScript Promises: there and back again.
    
 
    
 
 
    Демонстрация Service Workers
    
@@ -145,7 +145,7 @@ imgLoad('myLittleVader.jpg').then((response) => {
 
 

    
  
    
- Вы можете посмотреть исходный код на GitHub, а также этот живой пример. Единственное, что мы тут рассмотрим, это промис (смотрите app.js строки 22-47), модифицированная версия того, о котором вы читали выше в разделе Тестовая демонстрация промисов. Разница в следующем:
    
+Вы можете посмотреть исходный код на GitHub, а также этот живой пример. Единственное, что мы тут рассмотрим, это промис (смотрите app.js строки 22-47), модифицированная версия того, о котором вы читали выше в разделе Тестовая демонстрация промисов. Разница в следующем:
    
 
 
      
  
    1. Ранее мы передавали параметром лишь URL изображения, которое мы хотели загрузить. Теперь же, мы передаём JSON-фрагмент, содержащий все данные для изображения (посмотрите, как это выглядит в image-list.js). Это сделано потому, что все данные для выполнения каждого промиса должны быть переданы ему, так как он выполняется асинхронно. Если же вы передали лишь URL, а чуть позже попытались получить доступ к другим атрибутам в JSON-фрагменте внутри цикла for(), это бы не сработало, так как этот промис не был бы выполнен во время текущей итерации цикла (это синхронный процесс).
      2. 
@@ -437,7 +437,7 @@ event.request.body
    -

    На заметку: Вы можете держать своё приложение на http://localhost (например, используя me@localhost:/my/app$ python -m SimpleHTTPServer) для локальной разработки. См. Security considerations

    +

    На заметку: вы можете держать своё приложение на http://localhost (например, используя me@localhost:/my/app$ python -m SimpleHTTPServer) для локальной разработки. См. Security considerations

    Спецификации

    diff --git a/files/ru/web/api/speechrecognition/index.html b/files/ru/web/api/speechrecognition/index.html index f7939e84d2..2d51a58b74 100644 --- a/files/ru/web/api/speechrecognition/index.html +++ b/files/ru/web/api/speechrecognition/index.html @@ -193,7 +193,7 @@ recognition.onresult = function(event) {
      -
    • [1] Интерфейсы распознавания речи в настоящее время префиксные в Chrome, поэтому вам нужно указать имена интерфейсов, например, префикс. WebkitSpeechRecognition; Вы также должны будете обслуживать свой код через веб-сервер для распознавания работы
      • +
    • [1] Интерфейсы распознавания речи в настоящее время префиксные в Chrome, поэтому вам нужно указать имена интерфейсов, например, префикс. WebkitSpeechRecognition; вы также должны будете обслуживать свой код через веб-сервер для распознавания работы
    • [2] Может быть активирована через media.webspeech.recognition.enable флаг в about:config на телефоне. Не реализовано вообще на рабочем столе Firefox - см.{{bug(1248897)}}.
    diff --git a/files/ru/web/api/storage/key/index.html b/files/ru/web/api/storage/key/index.html index ace4277c9b..7792923102 100644 --- a/files/ru/web/api/storage/key/index.html +++ b/files/ru/web/api/storage/key/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Storage/key }
    -

    Примечание: Реальный пример Вы можете увидеть на Web Storage Demo.

    +

    Примечание: Реальный пример вы можете увидеть на Web Storage Demo.

    Стандарты

    diff --git a/files/ru/web/api/storage_access_api/index.html b/files/ru/web/api/storage_access_api/index.html index b25793e407..b94cbbaff4 100644 --- a/files/ru/web/api/storage_access_api/index.html +++ b/files/ru/web/api/storage_access_api/index.html @@ -78,7 +78,7 @@ translation_of: Web/API/Storage_Access_API

    Спецификации

    -

    API на стадии обсуждения — стандартизация не начата. Сейчас Вы можете ознакомиться с подробной спецификацией API в блоге Apple Introducing Storage Access API и WHATWG HTML issue 3338 — Proposal: Storage Access API.

    +

    API на стадии обсуждения — стандартизация не начата. Сейчас вы можете ознакомиться с подробной спецификацией API в блоге Apple Introducing Storage Access API и WHATWG HTML issue 3338 — Proposal: Storage Access API.

    Поддержка браузерами

    diff --git a/files/ru/web/api/vrdisplay/requestpresent/index.html b/files/ru/web/api/vrdisplay/requestpresent/index.html index acdb59197f..46af415823 100644 --- a/files/ru/web/api/vrdisplay/requestpresent/index.html +++ b/files/ru/web/api/vrdisplay/requestpresent/index.html @@ -18,7 +18,7 @@ translation_of: Web/API/VRDisplay/requestPresent
    layers
    -
    Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую Вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.
    +
    Массив объектов типа {{domxref("VRLayerInit")}}, представляющих собой сцену, которую вы хотите отобразить. На данный момент может быть минимум 0 элементов, максимум - 1.

    Возвращаемое значение

    diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index cb927ca206..40169f5104 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -39,7 +39,7 @@ translation_of: Web/API/Web_Audio_API на модели source-listener, он позволяет контролировать модель панорамирования и обходиться без дистанционно-вызванного ослабления (distance-induced attenuation) или duppler shift, вызванного сдвигом источника (или сдвигом слушателя).

    -

    Помните: Вы можете прочитать более детальный теоретический материал о Web audio API в нашей статье Basic concepts behind Web Audio API.

    +

    Помните: вы можете прочитать более детальный теоретический материал о Web audio API в нашей статье Basic concepts behind Web Audio API.

    Web Audio API интерфейсы

    diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html index a64b370af2..5e035e4eb5 100644 --- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html @@ -8,7 +8,7 @@ translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
    -

    Примечание: Вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации автоизменения голоса.

    +

    Примечание: вы можете найти рабочие примеры всех фрагментов кода в нашей демонстрации автоизменения голоса.

    Основные концепции

    @@ -33,12 +33,12 @@ distortion.connect(audioCtx.destination);

    Затем анализатор захватит аудиоданные, используя быстрое преобразование Фурье (БПФ) в определённой частотной области, в зависимости от того, что вы укажете как значение свойства {{ domxref("AnalyserNode.fftSize") }} (если свойство не задано, то значение по умолчанию равно 2048).

    -

    Примечание: Вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.

    +

    Примечание: вы так же можете указать значения минимума и максимума для диапазона масштабирования данных БПФ, используя {{ domxref("AnalyserNode.minDecibels") }} и {{ domxref("AnalyserNode.maxDecibels") }}, и разные константы усреднения данных с помощью {{ domxref("AnalyserNode.smoothingTimeConstant") }}. Прочтите эти страницы, чтобы получить больше информации о том как их использовать.

    -

    Чтобы получить данные, Вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.

    +

    Чтобы получить данные, вам нужно использовать методы {{ domxref("AnalyserNode.getFloatFrequencyData()") }} и {{ domxref("AnalyserNode.getByteFrequencyData()") }}, чтобы получить данные о частоте, и {{ domxref("AnalyserNode.getByteTimeDomainData()") }} и {{ domxref("AnalyserNode.getFloatTimeDomainData()") }} чтобы получить данные о форме волны.

    -

    Эти методы копируют данные в указанный массив, поэтому Вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных Вам данных.

    +

    Эти методы копируют данные в указанный массив, поэтому вам необходимо создать новый массив для хранения данных, прежде чем вызывать эти функции . Результат первой из них - числа типа float32, второй и третьей - uint8, поэтому стандартный массив JavaScript не подойдёт для их хранения — следует использовать массивы {{ domxref("Float32Array") }} или {{ domxref("Uint8Array") }}, в зависимости от нужных вам данных.

    Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.

    diff --git a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html index 882f40200d..af1eb40004 100644 --- a/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html +++ b/files/ru/web/api/web_storage_api/using_the_web_storage_api/index.html @@ -87,7 +87,7 @@ else {

    Метод {{domxref("Storage.getItem()")}} используется для получения данных из storage; в этом примере мы проверяем, чтобы увидеть существует ли bgcolor; если нет, мы запускаем populateStorage(), чтобы добавить значение по умолчанию в storage. Если значения уже есть там, мы запускаем setStyles(), для обновления стиля страница с сохранёнными значениями.
    - Примечание: Вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.

    + Примечание: вы можете также использовать {{domxref("Storage.length")}} для проверки storage object.

    Получение данных из Storage

    diff --git a/files/ru/web/api/webvr_api/index.html b/files/ru/web/api/webvr_api/index.html index a4809c7504..8905173834 100644 --- a/files/ru/web/api/webvr_api/index.html +++ b/files/ru/web/api/webvr_api/index.html @@ -33,7 +33,7 @@ translation_of: Web/API/WebVR_API

    Кроме того, WebVR 1.1 добавляет ряд событий {{domxref("Window")}} объекту, чтобы JavaScript мог реагировать на изменения состояния дисплея.

    -

    Примечание: Вы можете найти намного больше о том, как работает API в Using the WebVR API и WebVR Concepts статьях.

    +

    Примечание: вы можете найти намного больше о том, как работает API в Using the WebVR API и WebVR Concepts статьях.

    Использование контроллеров: Объединение WebVR с API-интерфейсом геймпада

    diff --git a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html index 1a82614d89..aae1549b03 100644 --- a/files/ru/web/api/webvr_api/using_the_webvr_api/index.html +++ b/files/ru/web/api/webvr_api/using_the_webvr_api/index.html @@ -5,7 +5,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API ---
    {{APIRef("WebVR API")}}
    -

    WebVR API - фантастическое дополнение к набору инструментов веб-разработчика, позволяющее отображать WebGL сцены на устройствах виртуальной реальности, таких как Oculus Rift и HTC Vive. Но как же начать разработку VR для Веба? Эта статья познакомит Вас с основами.

    +

    WebVR API - фантастическое дополнение к набору инструментов веб-разработчика, позволяющее отображать WebGL сцены на устройствах виртуальной реальности, таких как Oculus Rift и HTC Vive. Но как же начать разработку VR для Веба? Эта статья познакомит вас с основами.

    Обратите внимание: Наиболее стабильная версия WebVR API — 1.1 — была недавно реализована в Firefox 55 (для Windows в релизной версии, для Mac OS X только в Nightly версии). Так же она доступна в Chrome при использовании Google Daydream. Существует спецификация для следующей версии — 2.0 — но процесс разработки всё ещё находится на ранней стадии. Последнюю информацию можно найти на WebVR Spec Version List.

    @@ -13,22 +13,22 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API

    С чего начать

    -

    Для начала Вам понадобится:

    +

    Для начала вам понадобится:

    • Устройство с поддержкой VR.
        -
      • Самым дешёвым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато Вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.
        • +
      • Самым дешёвым вариантом будет использовать мобильное устройство, какое-нибудь крепление (например, Google Cardboard) и подходящий браузер. Ощущения будут не такие яркие, как от специализированного устройства, но зато вам не понадобится приобретать мощный компьютер или отдельный VR дисплей.
      • Специализированное устройство может быть дорогим, но зато ощущения будут лучше. Наиболее WebVR-совместимые устройства на данный момент: HTC VIVE, The Oculus Rift. Дополнительную информацию о доступных устройствах и их поддержке браузерами можно найти на webvr.info.
      • -
    • Компьютер с мощностью, достаточной для соответствующего рендеринга/отображения VR сцен, если вы всё-таки решите воспользоваться специализированным устройством. Чтобы получить некоторое представление о системных требованиях, поищите соответствующие руководства для VR платформы, которую Вы думаете использовать. В качестве примера: VIVE READY Computers.
      • +
    • Компьютер с мощностью, достаточной для соответствующего рендеринга/отображения VR сцен, если вы всё-таки решите воспользоваться специализированным устройством. Чтобы получить некоторое представление о системных требованиях, поищите соответствующие руководства для VR платформы, которую вы думаете использовать. В качестве примера: VIVE READY Computers.
    • Подходящий браузер. Последние версии Firefox Nightly и Chrome на данные момент являются лучшими вариантами, как для ПК, так и для мобильных устройств.
    -

    После того, как Вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть простой A-Frame пример и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.

    +

    После того, как вы всё подготовили, можете проверить всё ли работает как следует. Для этого надо открыть простой A-Frame пример и убедиться, что сцена отображается и что можно перейти в VR режим по нажатию на кнопку в правом нижнем углу.

    -

    Фреймворк A-Frame является лучшим вариантом, если Вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, Вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займёмся.

    +

    Фреймворк A-Frame является лучшим вариантом, если вы хотите быстро создать WebVR-совместимую сцену, не углубляясь в огромное количество JavaScript кода. Однако, пользуясь им, вы не узнаете о работе с чистым WebVR API, а именно этим мы сейчас и займёмся.

    Introducing our demo

    @@ -37,13 +37,13 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API

    -

    Обратите внимание: Вы можете найти исходный код примера на GitHub, а так же посмотреть как он работает прямо в браузере.

    +

    Обратите внимание: вы можете найти исходный код примера на GitHub, а так же посмотреть как он работает прямо в браузере.

    -

    Примечание: если Вы решили просто посмотреть на этот пример, не подключая VR устройство и не используя Firefox , то есть вероятность, что он не будет корректно отображаться при том, что простой A-Frame пример работает. В таком случае установите одну из последних версий Firefox, и пример должен отобразиться как на рисунке выше, плюс должна присутствовать анимация.

    +

    Примечание: если вы решили просто посмотреть на этот пример, не подключая VR устройство и не используя Firefox , то есть вероятность, что он не будет корректно отображаться при том, что простой A-Frame пример работает. В таком случае установите одну из последних версий Firefox, и пример должен отобразиться как на рисунке выше, плюс должна присутствовать анимация.

    -

    Обратите внимание: Если WebVR не работает в Вашем браузере, то возможно Вам следует убедиться, что работа идёт через видеокарту. Например, для видеокарт фирмы NVIDIA, если у Вас успешно установлена панель управления NVIDIA, по клику правой кнопки на ярлык Firefox появится контекстное меню, в котором можно будет выбрать Run with graphics processor > High-performance NVIDIA processor.

    +

    Обратите внимание: Если WebVR не работает в вашем браузере, то возможно вам следует убедиться, что работа идёт через видеокарту. Например, для видеокарт фирмы NVIDIA, если у вас успешно установлена панель управления NVIDIA, по клику правой кнопки на ярлык Firefox появится контекстное меню, в котором можно будет выбрать Run with graphics processor > High-performance NVIDIA processor.

    Наш пример это своеобразный святой Грааль примеров WebGL  — вращающийся куб в 3D. Реализован этот пример с помощью чистого WebGL API. Мы не будем объяснять основы JavaScript или WebGL, а только то, что касается WebVR.

    @@ -55,7 +55,7 @@ translation_of: Web/API/WebVR_API/Using_the_WebVR_API
  • Кнопка, показывающая и скрывающая обновляемые в реальном времени данные о положении и направлении VR устройства.
    • -

    При просмотре исходного кода основного JavaScript файла нашего примера, Вы легко сможете найти части, относящиеся к WebVR, по предваряющим их комментариям. Просто забейте в строку поиска по документу строчку "WebVR".

    +

    При просмотре исходного кода основного JavaScript файла нашего примера, вы легко сможете найти части, относящиеся к WebVR, по предваряющим их комментариям. Просто забейте в строку поиска по документу строчку "WebVR".

    Обратите внимание: Чтобы узнать больше об основах JavaScript и WebGL, обратитесь к нашим учебным материалам по JavaScript и нашему руководству по WebGL.

    diff --git a/files/ru/web/api/webxr_device_api/index.html b/files/ru/web/api/webxr_device_api/index.html index 7a1ce319e1..5db21be1de 100644 --- a/files/ru/web/api/webxr_device_api/index.html +++ b/files/ru/web/api/webxr_device_api/index.html @@ -100,7 +100,7 @@ translation_of: Web/API/WebXR_Device_API

    Руководства и уроки

    -

    Следующие руководства и уроки помогут Вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.

    +

    Следующие руководства и уроки помогут вам изучить, как работает WebXR и низкоуровневые функции 3D и VR/AR графики.

    Основы

    diff --git a/files/ru/web/api/window/beforeunload_event/index.html b/files/ru/web/api/window/beforeunload_event/index.html index 8df0192e07..e607468497 100644 --- a/files/ru/web/api/window/beforeunload_event/index.html +++ b/files/ru/web/api/window/beforeunload_event/index.html @@ -85,7 +85,7 @@ translation_of: Web/API/Window/beforeunload_event

    Совместимость с браузерами

    - +

    {{Compat("api.Window.beforeunload_event")}}

    diff --git a/files/ru/web/api/xmlhttprequest/timeout/index.html b/files/ru/web/api/xmlhttprequest/timeout/index.html index 47631f9455..997fb3eb94 100644 --- a/files/ru/web/api/xmlhttprequest/timeout/index.html +++ b/files/ru/web/api/xmlhttprequest/timeout/index.html @@ -14,7 +14,7 @@ translation_of: Web/API/XMLHttpRequest/timeout
    -
    Примечание: Вы не можете использовать таймаут для синхронных запросов с окном - владельцем.
    +
    Примечание: вы не можете использовать таймаут для синхронных запросов с окном - владельцем.
    Использование таймаута с асинхронными запросами
    diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 5a7b922577..adeef0cdd4 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -113,7 +113,7 @@ footer p:hover {

    В то время как, селекторы перечисленные внутри :where() имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.

    -

    Примечание: Вы так же можете найти этот пример на Github; смотрите is-where.

    +

    Примечание: вы так же можете найти этот пример на Github; смотрите is-where.

    {{EmbedLiveSample('Examples', '100%', 600)}}

    diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html index 3d023aba2c..f91c5764fc 100644 --- a/files/ru/web/css/align-content/index.html +++ b/files/ru/web/css/align-content/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/align-content
    {{EmbedInteractiveExample("pages/css/align-content.html")}}
    - +

    Это свойство не влияет на однострочные flex-контейнеры (т.е. с flex-wrap: nowrap)

    diff --git a/files/ru/web/css/css_animations/using_css_animations/index.html b/files/ru/web/css/css_animations/using_css_animations/index.html index 14ccbe0a77..d385be5f08 100644 --- a/files/ru/web/css/css_animations/using_css_animations/index.html +++ b/files/ru/web/css/css_animations/using_css_animations/index.html @@ -18,14 +18,14 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

    Есть три преимущества CSS-анимации перед традиционными способами:

      -
    1. Простота использования для простых анимаций; Вы можете создать анимацию, не зная JavaScript.
      2. +
    2. Простота использования для простых анимаций; вы можете создать анимацию, не зная JavaScript.
    3. Анимации будут хорошо работать даже при умеренных нагрузках системы. Простые анимации на JavaScript, если они плохо написаны, часто выполняются плохо. Движок может использовать frame-skipping и другие техники, чтобы сохранить производительность на таком высоком уровне .
    4. Позволяет браузеру контролировать последовательность анимации, тем самым оптимизируя производительность и эффективность браузера. Например, уменьшая частоту обновления кадров анимации в непросматриваемых в данный момент вкладках.

    Конфигурирование анимации

    -

    Чтобы создать CSS-анимацию Вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит Вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет Вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.

    +

    Чтобы создать CSS-анимацию вы должны добавить в стиль элемента, который хотите анимировать, свойство {{ cssxref("animation") }} или его подсвойства. Это позволит вам настроить ускорение и продолжительность анимации, а также другие детали того, как анимация должна протекать. Это не поможет вам настроить внешний вид анимации, который настраивается с помощью {{ cssxref("@keyframes") }}, рассматриваемой далее в {{ anch("Определение последовательности анимации с помощью ключевых кадров") }}.

    Свойство {{ cssxref("animation") }} имеет следующие подсвойства:

    @@ -39,7 +39,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy
    {{ cssxref("animation-delay") }}
    Настраивает задержку между временем загрузки элемента и временем начала анимации.
    {{ cssxref("animation-iteration-count") }}
    -
    Определяет количество повторений анимации; Вы можете использовать значение infinite для бесконечного повторения анимации.
    +
    Определяет количество повторений анимации; вы можете использовать значение infinite для бесконечного повторения анимации.
    {{ cssxref("animation-direction") }}
    Даёт возможность при каждом повторе анимации идти по альтернативному пути, либо сбросить все значения и повторить анимацию.
    {{ cssxref("animation-fill-mode") }}
    @@ -58,7 +58,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy

    Примеры

    -
    Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые Вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.
    +
    Внимание: Примеры ниже не используют префиксов для CSS стилей . Webkit-браузеры и старые версии других браузеров нуждаются в указании префиксов в CSS стилях. Примеры, на которые вы можете кликнуть в своём браузере, также содержат префиксы -webkit-.

    Скольжение текста

    @@ -326,7 +326,7 @@ e.addEventListener("animationiteration", listener, false); e.className = "slidein"; -

    Это довольно стандартный код; Вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

    +

    Это довольно стандартный код; вы можете получить дополнительную информацию в документации {{ domxref("element.addEventListener()") }}. Последнее, что делает этот код - это установка класса "slidein" для анимируемого элемента; мы делаем это, чтобы запустить анимацию.

    Почему? Потому что в нашем случае событие animationstart происходит как только анимация стартует, и это происходит раньше, чем исполняется наш сценарий. Так мы сможем контролировать начало анимации самостоятельно посредством вставки класса "slidein" для анимируемого элемента.

    diff --git a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html index 874e9a5982..f112da5488 100644 --- a/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/basic_concepts_of_flexbox/index.html @@ -95,7 +95,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

    Несмотря на то, что флекс-бокс - это однонаправленная модель, есть возможность завернуть наши флекс-элементы в несколько строк. При этом вы должны рассматривать каждую строку как новый флекс контейнер. Распределение пространства будет происходить на этой конкретной линии, не привязываясь к соседним линиям.

    -

    Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением wrap. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр flex-wrap установлен в значение wrap, элементы переносятся. Если Вы установите значение nowrap, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении nowrap будет происходить переполнение контейнера.

    +

    Чтобы включить такое поведение, добавьте параметр {{cssxref("flex-wrap")}} со значением wrap. Теперь, как только ваши элементы будут слишком большими для того, чтобы влезать на одну строчку, они будут переноситься на новые строки. Живой пример ниже содержит широкие элементы, у которых общая ширина больше, чем размер контейнера. Так как параметр flex-wrap установлен в значение wrap, элементы переносятся. Если вы установите значение nowrap, то есть в начальное значение, то элементы ужмутся так, чтобы все элементы поместились на одной строке, потому что у них установлено значение, позволяющее им ужиматься при необходимости. Если им запретить ужиматься, или если они не смогут ужаться достаточно сильно, то при установленном значении nowrap будет происходить переполнение контейнера.

    {{EmbedGHLiveSample("css-examples/flexbox/basics/flex-wrap.html", '100%', 400)}}

    diff --git a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html index 92c797bcf4..6388e20244 100644 --- a/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html +++ b/files/ru/web/css/css_flexible_box_layout/mastering_wrapping_of_flex_items/index.html @@ -77,7 +77,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

    Понимание этого поведения полезно, если вы планируете использовать яваскрипт на флекс-элементах и с его помощью прятать или показывать контент. Пример в спецификации демонстрирует один такой шаблон.

    -

    В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если Вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.

    +

    В следующем живом примере у нас показан флекс-контейнер со параметров "перенос" в состоянии "не переносить". Третий элемент имеет контента больше, чем другие элементы. И у него установлен параметр visibility: collapse. Следовательно он имеет некую "распорку", которая удерживает ту высоту, которая позволит показать этот элемент. Если вы удалите visibility: collapse из CSS или измените значение на visible, то вы увидите, что элемент исчезнет, а пространство перераспределится между не свёрнутыми элементами; высота флекс-контейнера при этом не изменится.

    Примечание. Используйте Firefox для двух приведённых ниже примеров, поскольку Chrome и Safari рассматривают свёрнутый элемент как скрытый.

    @@ -85,7 +85,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

    {{EmbedGHLiveSample("css-examples/flexbox/wrapping/visibility-collapse.html", '100%', 650)}}

    -

    Когда Вы работаете с многострочным флекс-контейнером, Вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.

    +

    Когда вы работаете с многострочным флекс-контейнером, вы должны помнить, что процесс обёртывания происходит после сворачивания. Таким образом, браузер должен повторно выполнить процедуру оборачивания, чтобы учесть новое пространство, оставленное свёрнутым элементом в главной оси.

    Это значит, что элементы могут оказаться на строке, отличной от той, на которой они начинались. В случае, если какой-то элемент отображается и скрывается, это может привести к тому, что элементы окажутся в другом ряду.

    @@ -93,8 +93,8 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items

    {{EmbedGHLiveSample("css-examples/flexbox/wrapping/wrapped-visibility-collapse.html", '100%', 750)}}

    -

    Если это вызывает проблемы для вашего макета, возможно Вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.

    +

    Если это вызывает проблемы для вашего макета, возможно вам стоит задуматься над переделкой структуры, например, поместить каждую строку в отдельный флекс-контейнер, чтобы они не могли смещать строки.

    Разница между visibility: hidden и display: none

    -

    Когда Вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

    +

    Когда вы устанавливаете элементу display: none чтобы его спрятать, то этот элемент удаляется из структуры страницы. На практике это означает, что счётчики игнорируют его, а такие вещи, как transitions (переходы), не запускаются. Использование visibility: hidden сохраняет элемент в структуре форматирования, что полезно, поскольку он по-прежнему ведёт себя так, как если бы он был частью макета, даже если пользователь не может его увидеть.

    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 964f414675..0bf469ac46 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 @@ -236,7 +236,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    Явный и неявный грид

    -

    Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если Вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

    +

    Во всех примерах выше мы создавали наши колоночные (столбцовые) треки с помощью свойства {{cssxref("grid-template-columns")}}, в то время как грид самостоятельно создавал строки (ряды, полосы) для любого контента там, где это требовалось. Эти строки создавались в неявном гриде. Явный грид состоит из строк и колонок, которые мы определяем с помощью {{cssxref("grid-template-columns")}} и {{cssxref("grid-template-rows")}}. Если вы размещаете что-нибудь вне рамок определённого данными свойствами грида или в зависимости от контента требуется большее количество грид-треков, грид создаёт строки и колонки в виде неявного грида. Размер подобных треков по умолчанию задаётся автоматически в зависимости от находящегося в них контента.

    Вы также можете задать размер треков, создаваемых в виде неявного грида с помощью свойств {{cssxref("grid-auto-rows")}} и {{cssxref("grid-auto-columns")}}.

    @@ -401,7 +401,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    {{ EmbedLiveSample('Размещение_элементов_по_линиям', '230', '420') }}

    -

    Не забывайте, что Вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

    +

    Не забывайте, что вы можете использовать Grid Inspector в Firefox Developer Tools, чтобы посмотреть, как элементы размещаются по линиям грида.

    Grid-ячейки

    @@ -521,7 +521,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout

    {{ EmbedLiveSample('nesting', '600', '340') }}

    -

    В данном случае вложенный грид не связан с родительским. Как Вы можете видеть, он не наследует значение свойства {{cssxref("grid-gap")}} родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

    +

    В данном случае вложенный грид не связан с родительским. Как вы можете видеть, он не наследует значение свойства {{cssxref("grid-gap")}} родительского элемента и линии вложенного грида не выравниваются по линиям родительского грида.

    Подгрид (Subgrid)

    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 4081789445..bdf9906212 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 @@ -4,7 +4,7 @@ slug: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas translation_of: Web/CSS/CSS_Grid_Layout/Grid_Template_Areas original_slug: Web/CSS/CSS_Grid_Layout/Грид-области --- -

    В предыдущем обзоре мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!

    +

    В предыдущем обзоре мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда вы работаете с CSS Grid Layout, у вас всегда есть грид-линии, поэтому они - быстрый, прямой и надёжный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определённых грид-областей. Давайте рассмотрим, как он работает, и вы скоро поймёте, почему его называют методом ascii-искусства в концепции макетов на гридах!

    Имя для грид-области

    @@ -154,7 +154,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области

    {{ EmbedLiveSample('Leaving_a_grid_cell_empty', '300', '330') }}

    -

    Чтобы сделать наш макет чище, мы можем использовать множество символов .. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, Вы прямо в CSS можете видеть, как выглядит Ваш макет.

    +

    Чтобы сделать наш макет чище, мы можем использовать множество символов .. Если между точками нет пробелов, то они считаются одной ячейкой. В комплексных макетах подобная возможность помогает аккуратно выравнивать строки и колонки. То есть, вы прямо в CSS можете видеть, как выглядит ваш макет.

    Охватываем несколько ячеек

    @@ -219,7 +219,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области

    {{ EmbedLiveSample('Spanning_multiple_cells', '300', '330') }}

    -

    Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у Вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

    +

    Значение {{cssxref("grid-template-areas")}} должно отображать законченный грид, а иначе оно невалидно (и игнорируется!). Это значит, что у вас должно быть одинаковое количество ячеек в каждой строке, а если какая-то ячейка должна быть пустой, то вместо имени в ней должна быть точка. Грид будет также невалидным, если области в нем не прямоугольные.

    Переопределение грида с медиавыражениями

    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 6d4d62e90d..043d708e69 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 @@ -300,7 +300,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } -

    Если Ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имён в неповторяющемся определении трека. Следующее определение создаёт четыре трека 1fr, каждый из которых имеет начальную и конечную линии.

    +

    Если ваш повторяющийся синтаксис помещает две строки рядом друг с другом, то они будут объединены и создадут тот же результат, что и присвоение строке нескольких имён в неповторяющемся определении трека. Следующее определение создаёт четыре трека 1fr, каждый из которых имеет начальную и конечную линии.

    .wrapper {
   grid-template-columns: repeat(4, [col-start] 1fr [col-end] );
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 cbbb43c16f..682f3051b8 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
@@ -13,13 +13,13 @@ original_slug: >-
 ---
 
    В статье, касавшейся основных понятий позиционирования элементов с помощью гридов, мы кратенько рассмотрели, как располагать элементы в гриде, используя номера линий. Теперь давайте детально исследуем то, как работает эта фундаментальная часть спецификации.
    
 
-
    Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда Вы работаете с гридами, пронумерованные линии у Вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.
    
+
    Собственно, начать квест по гридам со знакомства с пронумерованными линиями - логично, потому что в ситуации, когда вы работаете с гридами, пронумерованные линии у вас есть всегда. Линии нумеруются и для колонок, и для строк, отсчёт начинается с 1. Нужно заметить, что грид индексируется в соответствии с режимом написания (writing mode) документа. В языках с написанием слева направо, таких как русский, например, линия 1 - самая левая линия грида. Если написание справа налево, то линия 1 будет, соответственно, самой правой линией в гриде. По ходу изучения недр мы детально узнаем, как гриды взаимодействуют с режимами написания, поэтому не исчезайте, впереди много интересного.
    
 
 
    Базовый пример
    
 
 
    В качестве крайне простого примера давайте возьмём грид с тремя треками-колонками и тремя треками-строками. Такой грид даёт нам по 4 линии для каждого направления.
    
 
-
    Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырёх первых ячеек. Если Вы воспользуетесь Firefox Grid Highlighter , то увидите, как грид инициирует колонки и строки.
    
+
    Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырёх первых ячеек. Если вы воспользуетесь Firefox Grid Highlighter , то увидите, как грид инициирует колонки и строки.
    
 
 
    Our Grid highlighted in DevTools
    
 
@@ -72,7 +72,7 @@ original_slug: >-
 }
    -

    Если Вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока Вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.

    +

    Если вы явно позиционируете одни элементы, другие элементы грида по-прежнему размещаются в соответствии с правилами авторазмещения. Дальше мы детально рассмотрим, как это происходит, а пока вы и сами могли заметить, что по мере размещения одних элементов, оставшиеся элементы занимают пустые ячейки грида.

    Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.

    @@ -187,7 +187,7 @@ original_slug: >-

    Расположение элемента по умолчанию

    -

    В примерах выше мы задавали конечную линию для строки и колонки, чтобы продемонстрировать работу свойств, однако, если элемент занимает только один трек, Вы можете опустить значение grid-column-end или grid-row-end. Грид по умолчанию размещает элемент таким образом, чтобы он занимал всего один трек. Это значит, что длинная запись свойств в нашем первоначальном примере может выглядеть вот так:

    +

    В примерах выше мы задавали конечную линию для строки и колонки, чтобы продемонстрировать работу свойств, однако, если элемент занимает только один трек, вы можете опустить значение grid-column-end или grid-row-end. Грид по умолчанию размещает элемент таким образом, чтобы он занимал всего один трек. Это значит, что длинная запись свойств в нашем первоначальном примере может выглядеть вот так: