From 64e69e89d672e844c1891722ca4b8171eeec19af Mon Sep 17 00:00:00 2001 From: Alexander Myshov Date: Sun, 28 Mar 2021 20:25:45 +0700 Subject: Unify translation of "Media Query" to Russian (#343) * Unify translatioin of "mediaquery" to Russian * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/learn/css/css_layout/responsive_design/index.html Co-authored-by: Artem Shibakov * Update files/ru/web/css/media_queries/index.html Co-authored-by: Artem Shibakov Co-authored-by: Artem Shibakov --- files/ru/learn/css/css_layout/floats/index.html | 2 +- .../css_layout/multiple-column_layout/index.html | 2 +- .../ru/learn/css/css_layout/positioning/index.html | 2 +- .../css/css_layout/responsive_design/index.html | 24 +++++++++++----------- .../responsive_images/index.html | 2 +- files/ru/tools/style_editor/index.html | 2 +- files/ru/web/api/window/matchmedia/index.html | 2 +- files/ru/web/css/media_queries/index.html | 4 ++-- .../media_queries/using_media_queries/index.html | 6 +++--- files/ru/web/css/reference/index.html | 2 +- files/ru/web/html/element/link/index.html | 2 +- files/ru/web/html/element/style/index.html | 2 +- .../performance/critical_rendering_path/index.html | 2 +- files/ru/web/performance/fundamentals/index.html | 2 +- files/ru/web/performance/lazy_loading/index.html | 2 +- 15 files changed, 29 insertions(+), 29 deletions(-) diff --git a/files/ru/learn/css/css_layout/floats/index.html b/files/ru/learn/css/css_layout/floats/index.html index b48c895084..7edb7ea011 100644 --- a/files/ru/learn/css/css_layout/floats/index.html +++ b/files/ru/learn/css/css_layout/floats/index.html @@ -510,7 +510,7 @@ translation_of: Learn/CSS/CSS_layout/Floats
  • Позиционирование
  • Макет с несколькими столбцами
  • Отзывчивый дизайн
  • -
  • Руководство новичка в media queries
  • +
  • Руководство по медиавыражениям для новичков
  • Устаревшие методы макета
  • Поддержка старых браузеров
  • Базовая оценка понимания макета
  • diff --git a/files/ru/learn/css/css_layout/multiple-column_layout/index.html b/files/ru/learn/css/css_layout/multiple-column_layout/index.html index 0124d58ae8..14b11aadda 100644 --- a/files/ru/learn/css/css_layout/multiple-column_layout/index.html +++ b/files/ru/learn/css/css_layout/multiple-column_layout/index.html @@ -462,7 +462,7 @@ h2 {
  • Позиционирование
  • Макет с несколькими столбцами
  • Отзывчивый дизайн
  • -
  • Руководство новичка в media queries
  • +
  • Руководство по медиавыражениям для новичков
  • Устаревшие методы макетов
  • Поддержка старых браузеров
  • Базовая оценка понимания макета
  • diff --git a/files/ru/learn/css/css_layout/positioning/index.html b/files/ru/learn/css/css_layout/positioning/index.html index 13c7c1dafd..565bd6577a 100644 --- a/files/ru/learn/css/css_layout/positioning/index.html +++ b/files/ru/learn/css/css_layout/positioning/index.html @@ -574,7 +574,7 @@ dt {
  • Позиционирование
  • Макет с несколькими столбцами
  • Отзывчивый дизайн
  • -
  • Руководство новичка в media queries
  • +
  • Руководство по медиавыражениям для новичков
  • Устаревшие методы макетов
  • Поддержка старых браузеров
  • Базовая оценка понимания макета
  • diff --git a/files/ru/learn/css/css_layout/responsive_design/index.html b/files/ru/learn/css/css_layout/responsive_design/index.html index 62d427f5c5..f7d8bdfd2b 100644 --- a/files/ru/learn/css/css_layout/responsive_design/index.html +++ b/files/ru/learn/css/css_layout/responsive_design/index.html @@ -75,16 +75,16 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн
    1. Первой была идея жидких сеток, нечто что уже исследовала Гилленвотер, что можно прочитать в статье Маркотта - Fluid Grids (опубликовано в 2009 в A List Apart).
    2. Вторым методом была идея жидких изображений. Используя очень простой метод настройки свойства max-width на 100%, изображения будут становиться меньше если содержащий столбец становится уже чем изначальный размер изображения, но никогда не становится больше. Это позволяет изображению уменьшаться чтобы соответствовать столбцу гибких размеров, а не перекрываться с ним, но не расти и становиться пиксельным если столбец становится шире изображения.
    3. -
    4. Третьим ключевым компонентом был media query. Media Query позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    5. +
    6. Третьим ключевым компонентом были медиавыражения. Медиавыражения позволяют переключать тип макета применяя только CSS то, что Камерон Адамс исследовал, используя JavaScript. Вместо того чтобы иметь один макет для всех размеров экранов, макет мог изменяться. Боковые панели можно перемещать для маленьких экранов, либо отображать альтернативную навигацию.
    -

    Очень важно понять, что адаптивный веб-дизайн это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и media query, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

    +

    Очень важно понять, что адаптивный веб-дизайн это не отдельная технология, это термин используемый, чтобы описать подход к веб-дизайну или набор лучших практик, используемых для создания макета, который может реагировать на используемое устройство для просмотра контента. В первоначальном исследовании Маркотта это означало гибкие сетки (с использованием floats) и медиавыражения, однако почти за 10 лет, прошедших с момента написания этой статьи, адаптивная работа стала стандартом по умолчанию. Современные методы макета CSS отзывчивы по своей сути, и у нас есть новые штучки, встроенные в веб-платформу для того, чтобы делать дизайн отзывчивых сайтов проще.

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

    -

    Media Queries (Медиавыражения)

    +

    Медиавыражения

    -

    Отзывчивый дизайн был способен появится только благодаря media query. Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

    +

    Отзывчивый дизайн появился благодаря медиавыражениям (media queries). Спецификация Media Queries Level 3 стала Рекомендованным Кандидатом в 2009 году, что означает, что она была признана готовой к реализации в браузерах. Медиавыражения позволяют нам проводить серию тестов (например, является ли экран пользователя больше, чем определённая ширина или разрешение) и выборочно применять CSS к стилю страницы соответственно с нуждами пользователя.

    Например, следующее медиавыражение проверяет отображается ли текущая страница как экранная медиа (а не как печатный документ) и имеет ли область просмотра ширину как минимум 800 px. CSS будет применяться к селектору .container только если эти две вещи истины.

    @@ -95,11 +95,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн } -

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

    +

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

    -

    Общим подходом при использовании Media Queriy является создание простого одно колоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана чтобы уместить все. Это часто называют дизайном сначала мобильный (mobile first).

    +

    Общим подходом при использовании медиавыражений является создание простого одноколоночного макета для устройств с узкими экранами (например, мобильные телефоны), затем проверка для больших экранов и применение макета с несколькими столбцам, когда вы знаете, что у вас достаточно ширины экрана, чтобы уместить все. Такой подход часто называют mobile first дизайном.

    -

    Узнать больше о Media Query можно в документации MDN.

    +

    Узнать больше о медиавыражениях можно в документации MDN.

    Гибкие сетки

    @@ -121,7 +121,7 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

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

    -

    Следующий пример демонстрирует простой отзывчивый дизайн используя Media Query и гибкие сетки. На узких экранах макет отображает блоки, сложенные друг на друга:

    +

    Следующий пример демонстрирует простой отзывчивый дизайн, с использованием медиавыражений и гибких сеток. На узких экранах макет отображает блоки, расположенные друг над другом:

    A mobile view of the layout with boxes stacked on top of each other vertically.
    @@ -207,11 +207,11 @@ original_slug: Learn/CSS/CSS_layout/Отзывчивый_дизайн

    Вы можете найти подробное руководство по отзывчивым изображениям в разделе изучения HTML на MDN.

    -

    Отзывчивая типография

    +

    Отзывчивая типографика

    -

    Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографии. Главным образом, она описывает изменение размера шрифта в пределах media queries для того, чтобы отображать большую или меньшую площадь экрана.

    +

    Элементом отзывчивого дизайна, не освещённого ранее в работе, была идея отзывчивой типографики. Главным образом, она описывает изменение размеров шрифта в зависимости от ширины экрана при помощи медиавыражений.

    -

    В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем media queries чтобы переписать его для больших экранов если мы знаем что у пользователя есть экран размером как минимум 1200px.

    +

    В этом примере, мы хотим задать нашему заголовку первого уровня 4rem, что значит, что он будет в четыре раза больше нашего базового размера шрифта. Это очень большой заголовок! Мы хотим этот гигантский заголовок только на экранах больших размеров, поэтому мы сначала создаём меньший заголовок, а затем используем медиавыржаение, чтобы переписать его для больших экранов, если мы знаем, что у пользователя есть экран размером как минимум 1200px.

    html {
       font-size: 1em;
    @@ -246,7 +246,7 @@ h1 {
     

    Примечание: смотрите этот пример в действии: пример, исходный код.

    -

    Такой подход к типографии показывает, что вам не надо ограничивать media queries только изменением макета страницы. Они могут быть использоваться для настройки любого элемента, чтобы сделать его более удобным или привлекательным при других размерах экрана.

    +

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

    Using viewport units for responsive typography

    diff --git a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html index 9a1932d070..7dfa8a7070 100644 --- a/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html +++ b/files/ru/learn/html/multimedia_and_embedding/responsive_images/index.html @@ -86,7 +86,7 @@ translation_of: Learn/HTML/Multimedia_and_embedding/Responsive_images
  • Актуальная ширина картинки в пикселах (480w) — заметьте, что здесь используется w вместо px, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  Cmd + I , чтобы вывести информацию на экран).
  • -

    sizes определяет перечень медиа-выражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиа-выражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:

    +

    sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:

    1. Медиа-условие ((max-width:480px)) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим "когда viewport width меньше или равен 480 пикселям".
    2. diff --git a/files/ru/tools/style_editor/index.html b/files/ru/tools/style_editor/index.html index 870bdbbabc..edd6a38218 100644 --- a/files/ru/tools/style_editor/index.html +++ b/files/ru/tools/style_editor/index.html @@ -57,7 +57,7 @@ translation_of: Tools/Style_Editor

      Боковая панель @media

      -

      С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо @media правила. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щёлкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.

      +

      С Firefox 33 и далее, Редактор Стилей отображает боковую панель на правой стороне, где текущий лист содержит какие-либо медиавыражения. Боковая панель содержит список правил и ссылку на строки таблицы, где правило определено. Щёлкните элемент, чтобы перейти к этому правилу в листе.Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.

      Боковая панель медиа особенно хорошо работает с Responsive Design View для создания и отладки мобильных макетов:

      diff --git a/files/ru/web/api/window/matchmedia/index.html b/files/ru/web/api/window/matchmedia/index.html index 8f6912cc51..5c51968201 100644 --- a/files/ru/web/api/window/matchmedia/index.html +++ b/files/ru/web/api/window/matchmedia/index.html @@ -7,7 +7,7 @@ translation_of: Web/API/Window/matchMedia

      Сводка

      -

      Возвращает новый объект {{domxref("MediaQueryList")}} содержащий результат обработки переданной media query строки.

      +

      Возвращает новый объект {{domxref("MediaQueryList")}}, использующийся для определения соответствия документа переданной строке медиавыражения.

      Синтаксис

      diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html index 63d4f820cb..11c358f5b8 100644 --- a/files/ru/web/css/media_queries/index.html +++ b/files/ru/web/css/media_queries/index.html @@ -14,9 +14,9 @@ translation_of: Web/CSS/Media_Queries ---
      {{CSSRef("CSS3 Media Queries")}}
      -

      Media Queries - ключевой компонент отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

      +

      Медиавыражения (media queries) являются ключевым компонентом отзывчивого дизайна, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, медиавыражение может применить различные стили, если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.

      -

      Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.

      +

      Кроме того, синтаксис медиавыражений используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, для определения, нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.

      In addition, the {{domxref("Window.matchMedia()")}} method can be used to test the window against a media query. You can also use {{domxref("MediaQueryList.addListener()")}} to be notified whenever the state of the queries changes. With this functionality, your site or app can respond to changes in the device configuration, orientation, or state.

      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 3ea3434282..28e57dfba0 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 @@ -34,7 +34,7 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries
      @media (hover: hover) { ... }
      -

      Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:

      +

      Многие медиавыражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:

      @media (max-width: 12450px) { ... }
      @@ -48,11 +48,11 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries

      Дополнительные примеры медиавыражений, смотрите на справочной странице для каждой конкретной функции.

      -

      Создание комплексных медиавыражений

      +

      Создание комплексных медиавыражений

      Иногда вы хотите создать медиавыражение, включающий в себя несколько условий. В таком случае применяются логические операторы: not, and, and only. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.

      -

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

      +

      В прошлом примере мы видели, как применяется оператор and для группировки type и функции. Оператор and также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор only работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.

      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/reference/index.html b/files/ru/web/css/reference/index.html index 36869289dc..bc71f9313b 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -132,7 +132,7 @@ div.menu-bar li:hover > ul { display: block; }

      Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:

        -
      • Медиа-запросы
      • +
      • Медиавыражения
      • Счётчики
      • Градиенты
      • Трансформации
      • diff --git a/files/ru/web/html/element/link/index.html b/files/ru/web/html/element/link/index.html index e70c2d87f3..9170643859 100644 --- a/files/ru/web/html/element/link/index.html +++ b/files/ru/web/html/element/link/index.html @@ -98,7 +98,7 @@ original_slug: Web/HTML/Element/ссылка
        • В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е.  media типы и группы, которые определены и допустимы в качестве значений для этого атрибута, такие как print, screen, aural, braille. HTML5 распространил это на любые медиавыражения, которые являются расширенным набором допустимых значений HTML 4.
        • -
        • Браузеры, не поддерживающие CSS3 Media Queries, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
        • +
        • Браузеры, не поддерживающие медиавыражения, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.
      diff --git a/files/ru/web/html/element/style/index.html b/files/ru/web/html/element/style/index.html index 8442693d2a..125b29fbd3 100644 --- a/files/ru/web/html/element/style/index.html +++ b/files/ru/web/html/element/style/index.html @@ -30,7 +30,7 @@ translation_of: Web/HTML/Element/style
      {{htmlattrdef("type")}}
      Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «text/css».
      {{htmlattrdef("media")}}
      -
      К какому виду медиа должен применяться этот стиль. Значение этого атрибута — media query, которое при отсутствии атрибута будет all.
      +
      К какому виду медиа должен применяться этот стиль. Значением этого атрибута является медиавыражение, которое по умолчанию соответствует all.
      {{htmlattrdef("scoped")}}
      Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.
      {{htmlattrdef("title")}}
      diff --git a/files/ru/web/performance/critical_rendering_path/index.html b/files/ru/web/performance/critical_rendering_path/index.html index 995d8f81c8..5e6d7bf290 100644 --- a/files/ru/web/performance/critical_rendering_path/index.html +++ b/files/ru/web/performance/critical_rendering_path/index.html @@ -31,7 +31,7 @@ translation_of: Web/Performance/Critical_rendering_path

      Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, .foo {} сработает быстрее .bar .foo {}. В первом случае, условно, понадобится одна операция, чтобы найти элемент .foo, во втором случае, сначала будут найдены все .foo, а потом браузер пройдёт вверх по дереву в поисках родительского элемента .bar. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.

      -

      Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо. Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие пути оптимизации CSS, такие как унификация, разделение CSS-файлов на разные файлы на основе media-queries.

      +

      Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо. Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие пути оптимизации CSS, такие как унификация, разделение CSS-файлов на разные файлы на основе медиавыражений.

      Дерево рендера (Render Tree)

      diff --git a/files/ru/web/performance/fundamentals/index.html b/files/ru/web/performance/fundamentals/index.html index ef0e1d10f4..7708cc7c6e 100644 --- a/files/ru/web/performance/fundamentals/index.html +++ b/files/ru/web/performance/fundamentals/index.html @@ -137,7 +137,7 @@ original_slug: Web/Performance/Основы

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

      -

      При использовании HTML и CSS разработчику необходимо использовать правильные примитивы. Firefox очень хорошо оптимизирован для скролла любого контента. Обычно это не является проблемой. Но очень часто, разменивая качество и стабильность на скорость, мы идём на ухищрения, которые могут "переоптимизировать" страницу так, что частота кадров будет выше нужной нам. Так как глаз всё равно слабо различает FPS больше 60, нет необходимости в таких оптимизациях. Одна из таких оптимизаций - использование статического рендера вместо CSS-градиента. В некоторых случаях это излишне. Чтобы не применять оптимизацию, вы можете воспользоваться CSS media queries, которые позволят использовать подобные решения только для конкретных устройств.

      +

      При использовании HTML и CSS разработчику необходимо использовать правильные примитивы. Firefox очень хорошо оптимизирован для скролла любого контента. Обычно это не является проблемой. Но очень часто, разменивая качество и стабильность на скорость, мы идём на ухищрения, которые могут "переоптимизировать" страницу так, что частота кадров будет выше нужной нам. Так как глаз всё равно слабо различает FPS больше 60, нет необходимости в таких оптимизациях. Одна из таких оптимизаций - использование статического рендера вместо CSS-градиента. В некоторых случаях это излишне. Чтобы не применять оптимизацию, вы можете воспользоваться медиавыражениями, которые позволят использовать подобные решения только для конкретных устройств.

      Множество приложений используют Transitions и Animations для перехода между страницами или панелями. Например, когда пользователь нажимает кнопку "Настройки", чтобы перейти на другой экран; или для вызова поп-апа. Firefox оптимизирован для выполнения переходов и анимаций для сцен, которые:

      diff --git a/files/ru/web/performance/lazy_loading/index.html b/files/ru/web/performance/lazy_loading/index.html index 408bce571e..fe8872c0f3 100644 --- a/files/ru/web/performance/lazy_loading/index.html +++ b/files/ru/web/performance/lazy_loading/index.html @@ -37,7 +37,7 @@ translation_of: Web/Performance/Lazy_loading

          CSS

      -

      По умолчанию, CSS рассматривается как блокирующий рендер (render blocking) ресурс, так что браузер не отобразит контент, пока объектная модель CSS (CSSOM) не будет завершена. Поэтому начальный CSS файл должен небольшим, чтобы быть доставленным так быстро, как это возможно. Рекомендуется использовать media-queries для того, чтобы вместо одного монолитного css-файла грузить специализированные

      +

      По умолчанию CSS считается ресурсом, блокирующим рендеринг (render blocking). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (CSSOM). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.

      <link href="style.css"    rel="stylesheet" media="all">
       <link href="portrait.css" rel="stylesheet" media="orientation:portrait">
      -- 
      cgit v1.2.3-54-g00ecf