From 0057f9bf08252974cd89456bd9f4334dc236c40a Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Sat, 20 Mar 2021 16:56:28 +0300 Subject: Unify Russian translation for media query word (#224) * Unify Russian translation for media query word * Apply suggestions from code review Co-authored-by: Artem Shibakov --- files/ru/web/css/@media/index.html | 4 +-- files/ru/web/css/at-rule/index.html | 2 +- files/ru/web/css/clamp()/index.html | 2 +- .../css_grid_layout/grid_template_areas/index.html | 6 ++-- .../index.html | 8 ++--- .../media_queries/testing_media_queries/index.html | 34 +++++++++++----------- .../media_queries/using_media_queries/index.html | 18 ++++++------ files/ru/web/css/ratio/index.html | 6 ++-- files/ru/web/css/transform/index.html | 2 +- 9 files changed, 41 insertions(+), 41 deletions(-) (limited to 'files/ru/web/css') diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html index d84acd05ca..10e65064de 100644 --- a/files/ru/web/css/@media/index.html +++ b/files/ru/web/css/@media/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/@media

Описание

-

At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиазапросов.

+

At-правило @media в CSS связывает набор операторов, ограниченных фигурными скобками, в CSS блок, применяется при соблюдении условия одного или нескольких медиавыражений.

В JavaScript, at-правило @media может быть получено с помощью {{domxref("CSSMediaRule")}}, интерфейса объектной модели CSS.

@@ -33,7 +33,7 @@ translation_of: Web/CSS/@media } } -

Для рассмотрения синтаксиса медиазапросов, см. Использование медиазапросов.

+

Для рассмотрения синтаксиса медиавыражений, см. Использование медиавыражений.

Формальный синтаксис

diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html index fd71ca762f..38cf88c874 100644 --- a/files/ru/web/css/at-rule/index.html +++ b/files/ru/web/css/at-rule/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/At-rule
  • {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имен XML.
  • Вложенные at-правила — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
      -
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенному с помощью медиазапроса.
      • +
    • {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определенного с помощью медиавыражения.
    • {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
    • {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
    • {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применен при печати документа.
      • diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 4411cbf891..e764043f93 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -55,7 +55,7 @@ width: 64px;

      Установка минимального и максимального размера шрифта

      -

      clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиа-запросов.

      +

      clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

      p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
      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 19795f3d19..2b99c113d1 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 @@ -221,11 +221,11 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области

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

      -

      Переопределение грида с медиа-запросами

      +

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

      Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновременно.

      -

      При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

      +

      При этом определяйте имена для ваших грид-областей за пределами медиавыражений. В таком случае, область основного содержимого (content) всегда будет называться main независимо от того, где она находится на сетке.

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

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

      Внутри медиа-запросов, мы переопределяем этот макет на двухколонный, а при увеличении свободного пространства, на трехколонный. Обратите внимание, что для широкого макета я оставляю свою девятиколонную трековую сетку, а с помощью grid-template-areas я указываю куда стоит разместить грид-области. 

      +

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

      @media (min-width: 500px) {
     .wrapper {
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 818592a218..c452871664 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
@@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 </div>
      -

      Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиа-запросов, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.

      +

      Поскольку мы используем {{cssxref("grid-template-areas")}} для создания макета, вне каких-либо медиавыражений, мне нужно назвать области. Мы называем области, используя свойство {{cssxref("grid-area")}}.

      .main-head {
   grid-area: header;
@@ -81,7 +81,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 }
      -

      Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиа-запросов, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве Grid layout and accessibility. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.

      +

      Это не создаст никакого макета, однако наши элементы теперь имеют имена, которые мы можем использовать для создания. Оставаясь вне каких-либо медиавыражений, я теперь собираюсь настроить макет для мобильной платформы. Здесь я держу все в исходном порядке, пытаясь избежать любого разрыва между источником и дисплеем, как описано в руководстве Grid layout and accessibility. У меня нет столбцов или строк, т. к. такой макет предполагает один столбец, и строки будут создаваться по мере необходимости для каждого из элементов неявной сетки.

      .wrapper {
   display: grid;
@@ -96,7 +96,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 }
      -

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

      +

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

      @media (min-width: 500px) {
   .wrapper {
@@ -336,7 +336,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_
 
 
      Создание списка с помощью авторазмещения
      
 
-
      Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавлять медиа-запросы. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.
      
+
      Многие макеты, по сути, представляют собой наборы "карточек" - списки продуктов, галереи изображений и так далее. Сетка может очень легко создавать эти списки таким образом, чтобы они были отзывчивыми, без необходимости добавления медиавыражений. В следующем примере я комбинирую CSS Grid и Flexbox макеты, чтобы сделать простой макет списка продуктов.
      
 
 
      Разметка моего списка-это неупорядоченный список элементов. Каждый элемент содержит заголовок, некоторый текст различной высоты и ссылку с призывом к действию.
      
 
diff --git a/files/ru/web/css/media_queries/testing_media_queries/index.html b/files/ru/web/css/media_queries/testing_media_queries/index.html
index 3941df9955..facf42b21c 100644
--- a/files/ru/web/css/media_queries/testing_media_queries/index.html
+++ b/files/ru/web/css/media_queries/testing_media_queries/index.html
@@ -1,28 +1,28 @@
 ---
-title: Тестирование медиа-запросов программно
+title: Тестирование медиавыражений программно
 slug: Web/CSS/Media_Queries/Testing_media_queries
 tags:
-  - Запросы
-  - медиа-запросы
+  - Выражения
+  - медиавыражения
 translation_of: Web/CSS/Media_Queries/Testing_media_queries
 original_slug: Web/CSS/Media_Queries/Тестирование_медиа_запросы
 ---
 
      {{cssref}}
      
 
-
       {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиа-запросов программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат запроса или получать уведомление, при изменении результата.
      
+
       {{Glossary("DOM")}} предоставляет возможности, позволяющие тестировать результат  медиавыражений программно, с помощью интерфейса {{domxref("MediaQueryList") }}, его методов и свойств. Однажды, создав объект {{domxref("MediaQueryList") }} вы можете проверить результат выражения или получать уведомление, при изменении результата.
      
 
-
      Создание списка медиа-запросов
      
+
      Создание списка медиавыражений
      
 
-
      Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используется метод {{domxref("window.matchMedia") }}.
      
+
      Прежде, чем вы сможете оценить результаты медиавыражений, вам необходимо создать объект {{domxref("MediaQueryList") }}, отражающий выражение. Для этого используется метод {{domxref("window.matchMedia") }}.
      
 
-
      Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:
      
+
      Например, настройка списка выражений, который определяет, находится ли устройство в альбомной или книжной ориентации:
      
 
 
      var mediaQueryList = window.matchMedia("(orientation: portrait)");
 
      
 
-
      Проверка результата запроса
      
+
      Проверка результата выражения
      
 
-
      После того, как вы создали свой список медиа-запросов, вы можете проверить результат запроса, посмотрев на значение его свойства matches:
      
+
      После того, как вы создали свой список медиавыражений, вы можете проверить результат выражения, посмотрев на значение его свойства matches:
      
 
 
      if (mediaQueryList.matches) {
   /* Окно просмотра в настоящее время находится в книжной ориентации */
@@ -31,20 +31,20 @@ original_slug: Web/CSS/Media_Queries/Тестирование_медиа_зап
 }
 
      
 
-
      Получение уведомлений о запросах
      
+
      Получение уведомлений о выражениях
      
 
-
      Если вам необходимо постоянно следить за изменениями в результате запроса, эффективнее зарегистрировать обработчик, чем вытаскивать результат запросов.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией колбэка, которая вызывается при изменении статуса медиа-запроса (например, тест медиа-запроса переходит от true к false):
      
+
      Если вам необходимо постоянно следить за изменениями в результате выражения, эффективнее зарегистрировать обработчик, чем вытаскивать результат выражений.  Для этого вызовите метод addListener() объекта {{domxref("MediaQueryList") }} с функцией колбэка, которая вызывается при изменении статуса медиавыражения (например, тест медиавыражения переходит от true к false):
      
 
-
      var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка запросов.
+
      var mediaQueryList = window.matchMedia("(orientation: portrait)"); // Создание списка выражений.
 function handleOrientationChange(mql) { ... } // Определение колбэк-функции для обработчика событий.
-mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку запросов.
+mediaQueryList.addListener(handleOrientationChange); // Добавление колбэк-функции в качестве обработчика к списку выражений.
 
 handleOrientationChange(mediaQueryList); // Запуск обработчика изменений, один раз.
 
      
 
-
      Этот код создает список медиа-запросов для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.
      
+
      Этот код создает список медиавыражений для тестирование ориентации, а затем добавляет к нему обработчик событий. После добавления обработчика, мы, также, непосредственно вызываем обработчик. Это заставляет нашего обработчика выполнять настройки, основываясь на текущей ориентации устройства; в противном случае, наш код может предполагать, что устройство находится в книжной ориентации при запуске, даже если оно фактически находится в альбомном положении.
      
 
-
      Функция handleOrientationChange() будет следить за результатом запроса и обрабатывать все, что нам нужно сделать при изменении ориентации:
      
+
      Функция handleOrientationChange() будет следить за результатом выражения и обрабатывать все, что нам нужно сделать при изменении ориентации:
      
 
 
      function handleOrientationChange(evt) {
   if (evt.matches) {
@@ -59,9 +59,9 @@ handleOrientationChange(mediaQueryList); // Запуск обработчика
 
 
      Этот event объект также включает свойства {{domxref("MediaQueryListEvent.media","media")}} и {{domxref("MediaQueryListEvent.matches","matches")}}, поэтому вы можете запросить эти свойства MediaQueryList путем прямого доступа к нему или доступа к event объекту.
      
 
-
      Уведомление о завершении запроса
      
+
      Уведомление о завершении выражения
      
 
-
      Для прекращения уведомлений об изменении значения вашего медиа-запроса вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:
      
+
      Для прекращения уведомлений об изменении значения вашего медиавыражения вызовите метод removeListener() для {{domxref("MediaQueryList") }}, передав ему имя, ранее определенной функции:
      
 
 
      mediaQueryList.removeListener(handleOrientationChange);
 
      
diff --git a/files/ru/web/css/media_queries/using_media_queries/index.html b/files/ru/web/css/media_queries/using_media_queries/index.html
index 8c3f484537..9923ab8f1e 100644
--- a/files/ru/web/css/media_queries/using_media_queries/index.html
+++ b/files/ru/web/css/media_queries/using_media_queries/index.html
@@ -1,11 +1,11 @@
 ---
-title: Использование медиа-запросов
+title: Использование медиавыражений
 slug: Web/CSS/Media_Queries/Using_media_queries
 tags:
   - Веб
   - Медиа
   - Медиа верстка
-  - Медиа запросы
+  - Медиавыражения
   - Отзывчивый дизайн
   - Продвинутый
   - Резиновая вёрстка
@@ -14,11 +14,11 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 ---
 
      {{cssref}}
      
 
-
      Медиазапросы используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиазапросы являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 
      
+
      Медиавыражения используются в тех случаях , когда нужно применить разные CSS-стили, для разных устройств по типу отображения (например: для принтера, монитора или смартфона), а также конкретных характеристик устройства  (например: ширины окна просмотра браузера), или внешней среды (например: внешнее освещение). Учитывая огромное количество подключаемых к интернету устройств, медиавыражения являются очень важным инструментом при создании веб-сайтов и приложений, которые будут правильно работать на всех доступных устройствах, которые  есть у Ваших пользователей. 
      
 
 
      Медиа для разных типов устройств
      
 
-
      Медиа запросы позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
      
+
      Медиавыражения позволяют адаптировать страницу для различных типов устройств, таких как: принтеры, речевых браузеров, устройств Брайля, телевизоров и так далее. Например это правило для принтеров:
      
 
 
      @media print { ... }
      
 
@@ -38,7 +38,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 
 
      @media (max-width: 12450px) { ... }
      
 
-
      Если вы создаете медиа-запрос без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
      
+
      Если вы создаете медиавыражение без указания значения, вложенные стили будут использоваться до тех пор, пока значение функции не равно нулю. Например, этот CSS будет применяться к любому устройству с цветным экраном:
      
 
 
      @media (color) { ... }
      
 
@@ -46,13 +46,13 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
 
 
      @media speech and (aspect-ratio: 11/5) { ... }
      
 
-
      Дополнительные примеры медиа запросов, смотрите на справочной странице для каждой конкретной функции.
      
+
      Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.
      
 
-
      Создание комплексных медиа запросов
      
+
      Создание комплексных медиавыражений
      
 
-
      Иногда вы хотите создать медиа-запрос, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиа-запросов в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
      
+
      Иногда вы хотите создать медиавыражение, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.
      
 
-
      В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор and так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиазапрос, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.
      
+
      В прошлом примере мы видели как применяется оператор and для группировки type и функции. Оператор and так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.
      
 
 
      
 
      Note: In most cases, the all media type is used by default when no other type is specified. However, if you use the not or only operators, you must explicitly specify a media type.
      
diff --git a/files/ru/web/css/ratio/index.html b/files/ru/web/css/ratio/index.html
index e5ca478ac0..aa1e0f260e 100644
--- a/files/ru/web/css/ratio/index.html
+++ b/files/ru/web/css/ratio/index.html
@@ -2,14 +2,14 @@
 title: 
 slug: Web/CSS/ratio
 tags:
-  - медиа-запрос
+  - медиавыражение
   - тип данных
   - формат экрана
 translation_of: Web/CSS/ratio
 ---
 
      {{CSSRef}}
      
 
-
      Тип данных CSS <ratio> используется для описания соотношений сторон в медиа-запросах, обозначает соотношения между двумя безразмерными значениями.
      
+
      Тип данных CSS <ratio> используется для описания соотношений сторон в медиавыражениях, обозначает соотношения между двумя безразмерными значениями.
      
 
 
      Синтаксис
      
 
@@ -17,7 +17,7 @@ translation_of: Web/CSS/ratio
 
 
      Примеры
      
 
-
      Использование в медиа-запросах
      
+
      Использование в медиавыражениях
      
 
 
      @media screen and (min-aspect-ratio: 16/9) { ... }
      
 
diff --git a/files/ru/web/css/transform/index.html b/files/ru/web/css/transform/index.html
index ac2a28f848..54d70a010d 100644
--- a/files/ru/web/css/transform/index.html
+++ b/files/ru/web/css/transform/index.html
@@ -105,7 +105,7 @@ transform: unset;
 
 
      Scaling/zooming анимации являются проблемой для accessibility, поскольку они становятся частым триггером для определенных типов мигрени. Если вам нужно добавить такие анимации на вашем веб-сайте, вы должны предоставить элемент управления, позволяющий пользователям отключать анимации, предпочтительно для всего сайта.
      
 
-
      Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиа-запроса")}}, который отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
      
+
      Кроме того, рассмотрите возможность использования @media-опции {{cssxref("@media/prefers-reduced-motion", "prefers-reduced-motion")}} — используйте ее для написания {{cssxref("Media_Queries", "медиавыражения")}}, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.
      
 
 
      Узнать больше:
      
 
-- 
cgit v1.2.3-54-g00ecf