diff options
Diffstat (limited to 'files/ru/web')
| -rw-r--r-- | files/ru/web/api/window/matchmedia/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/css/media_queries/index.html | 4 | ||||
| -rw-r--r-- | files/ru/web/css/media_queries/using_media_queries/index.html | 6 | ||||
| -rw-r--r-- | files/ru/web/css/reference/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/html/element/link/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/html/element/style/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/performance/critical_rendering_path/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/performance/fundamentals/index.html | 2 | ||||
| -rw-r--r-- | files/ru/web/performance/lazy_loading/index.html | 2 |
9 files changed, 12 insertions, 12 deletions
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 <h2 id="Summary" name="Summary">Сводка</h2> -<p>Возвращает новый объект {{domxref("MediaQueryList")}} содержащий результат обработки переданной <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">media query</a> строки.</p> +<p>Возвращает новый объект {{domxref("MediaQueryList")}}, использующийся для определения соответствия документа переданной строке <a href="/en-US/docs/CSS/Media_queries" title="CSS/Media queries">медиавыражения</a>.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> 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 --- <div>{{CSSRef("CSS3 Media Queries")}}</div> -<p><strong>Media Queries</strong> - ключевой компонент <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> +<p><strong>Медиавыражения (media queries)</strong> являются ключевым компонентом <a href="/en-US/docs/Web/Apps/Progressive/Responsive">отзывчивого дизайна</a>, который делает возможным для CSS адаптироваться в зависимости от различных параметров или характеристик устройства. Например, медиавыражение может применить различные стили, если экран меньше определённого размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> -<p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.</p> +<p>Кроме того, синтаксис медиавыражений используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, для определения, нужно или нет использовать этот источник, когда выбирается определённое изображение для использования в элементе {{HTMLElement("picture")}}.</p> <p>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.</p> 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 <pre class="brush: css">@media (hover: hover) { ... }</pre> -<p>Многие медиа-выражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:</p> +<p>Многие медиавыражения представляют собой функцию диапазона и имеют префиксы "min-" или "max-". Минимальное значение и максимальное значение условия, соответственно. Например этот CSS-код применяется только если ширина {{glossary("viewport")}} меньше или равна 12450px:</p> <pre class="brush: css">@media (max-width: 12450px) { ... }</pre> @@ -48,11 +48,11 @@ translation_of: Web/CSS/Media_Queries/Using_media_queries <p>Дополнительные примеры медиавыражений, смотрите на <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media#Media_features">справочной странице</a> для каждой конкретной функции.</p> -<h2 id="Создание_комплексных_медиа_запросов">Создание комплексных медиавыражений</h2> +<h2 id="Создание_комплексных_медиавыражений">Создание комплексных медиавыражений</h2> <p>Иногда вы хотите создать медиавыражение, включающий в себя несколько условий. В таком случае применяются <em>логические операторы</em>: <code>not</code>, <code>and</code>, and <code>only</code>. Кроме того, вы можете объединить несколько медиавыражений в список через запятую; это позволяет применять одни и те же стили в разных ситуациях.</p> -<p>В прошлом примере мы видели как применяется оператор <code>and</code> для группировки <em>type</em> и функции. Оператор <code>and</code> так же может комбинировать несколько функций в одно медиа-выражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Единственный оператор не позволяет старым браузерам применять стили.</p> +<p>В прошлом примере мы видели, как применяется оператор <code>and</code> для группировки <em>type</em> и функции. Оператор <code>and</code> также может комбинировать несколько функций в одно медиавыражение. Между тем, оператор not отрицает медиавыражение, полностью инвертируя его значение. Оператор <em>only</em> работает тогда, когда применяется всё выражение, не позволяя старым браузерам применять стили.</p> <div class="note"> <p><strong>Note:</strong> In most cases, the <code>all</code> media type is used by default when no other type is specified. However, if you use the <code>not</code> or <code>only</code> operators, you must explicitly specify a media type.</p> 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; } <p>Эти маленькие страницы описывают технологии, появившиеся в CSS3 или CSS2.1, но с плохой поддержкой браузерами до недавнего времени:</p> <ul> - <li><a href="/ru/docs/Web/Guide/CSS/Media_queries">Медиа-запросы</a></li> + <li><a href="/ru/docs/Web/Guide/CSS/Media_queries">Медиавыражения</a></li> <li><a href="/ru/docs/Web/Guide/CSS/Counters">Счётчики</a></li> <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_gradients">Градиенты</a></li> <li><a href="/ru/docs/Web/Guide/CSS/Using_CSS_transforms">Трансформации</a></li> 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/ссылка <ul> <li>В HTML 4, это может быть только простой, разделённый пробелами, список литералов, описывающих медиа, т.е. <a href="/en-US/docs/Web/CSS/@media">media типы и группы</a>, которые определены и допустимы в качестве значений для этого атрибута, такие как <code>print</code>, <code>screen</code>, <code>aural</code>, <code>braille</code>. HTML5 распространил это на любые <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражения</a>, которые являются расширенным набором допустимых значений HTML 4.</li> - <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">CSS3 Media Queries</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.</li> + <li>Браузеры, не поддерживающие <a href="/en-US/docs/Web/CSS/Media_queries">медиавыражения</a>, могут не распознать соответствующую ссылку; не забудьте установить резервные ссылки, ограниченные набором медиавыражений, определённым в HTML 4.</li> </ul> </div> </dd> 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 <dt>{{htmlattrdef("type")}}</dt> <dd>Этот атрибут определяет язык стиля в виде MIME-типа (кодировка не указывается). Этот атрибут необязателен, и при отсутствии считается «<code>text/css</code>».</dd> <dt>{{htmlattrdef("media")}}</dt> - <dd>К какому виду медиа должен применяться этот стиль. Значение этого атрибута — <a href="/ru/docs/Web/Guide/CSS/Media_queries">media query</a>, которое при отсутствии атрибута будет <code>all</code>.</dd> + <dd>К какому виду медиа должен применяться этот стиль. Значением этого атрибута является <a href="/ru/docs/Web/Guide/CSS/Media_queries">медиавыражение</a>, которое по умолчанию соответствует <code>all</code>.</dd> <dt>{{htmlattrdef("scoped")}}</dt> <dd>Если указан этот атрибут, то стиль применяется только внутри своего родительского элемента. Если не указан, то стиль применяется ко всему документу.</dd> <dt>{{htmlattrdef("title")}}</dt> 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 <p>Говоря о производительности селекторов (selector), наименее специфичные селекторы срабатывают быстрее. Например, <code>.foo {}</code> сработает быстрее <code>.bar .foo {}</code>. В первом случае, условно, понадобится одна операция, чтобы найти элемент <code>.foo</code>, во втором случае, сначала будут найдены все <code>.foo</code>, а<strong> </strong>потом<strong> браузер пройдёт вверх</strong> по дереву в поисках родительского элемента <code>.bar</code>. Более специфичные селекторы требуют от браузера большего количества работы, но эти проблемы, вероятно, не стоят их оптимизации.</p> -<p>Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. <u>Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо.</u> Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие <a href="/en-US/docs/Learn/Performance/CSS_performance">пути оптимизации CSS</a>, такие как унификация, разделение CSS-файлов на разные файлы на основе media-queries.</p> +<p>Если вы измерите время, требуемое на парсинг CSS, вы будете удивлены тем, как быстро работают браузеры. Более специфичные правила более затратны, потому что требуют обхода большего числа узлов в DOM дереве, но эта дороговизна обходится довольно дёшево, особенно в сравнении с другими узкими местами производительности. <u>Сначала измеряйте. Потом оптимизируйте, если это действительно необходимо.</u> Вероятно, специфичность селекторов не то, что действительно затормаживает ваше приложение. Когда дело доходит до оптимизации CSS, улучшение производительность селекторов ускоряет рендеринг лишь на микросекунды. Существуют другие <a href="/en-US/docs/Learn/Performance/CSS_performance">пути оптимизации CSS</a>, такие как унификация, разделение CSS-файлов на разные файлы на основе медиавыражений.</p> <h3 id="Дерево_рендера_Render_Tree">Дерево рендера (Render Tree)</h3> 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/Основы <p>При отрисовывании контента в Canvas, разработчик должен сам позаботиться о достижении целей по частоте кадров, ведь он получает полный контроль над всем, что отрисовывается.</p> -<p>При использовании HTML и CSS разработчику необходимо использовать правильные примитивы. Firefox очень хорошо оптимизирован для скролла любого контента. Обычно это не является проблемой. Но очень часто, разменивая качество и стабильность на скорость, мы идём на ухищрения, которые могут "переоптимизировать" страницу так, что частота кадров будет выше нужной нам. Так как глаз всё равно слабо различает FPS больше 60, нет необходимости в таких оптимизациях. Одна из таких оптимизаций - использование статического рендера вместо CSS-градиента. В некоторых случаях это излишне. Чтобы не применять оптимизацию, вы можете воспользоваться CSS <a href="/en-US/docs/Web/Guide/CSS/Media_queries">media queries</a>, которые позволят использовать подобные решения только для конкретных устройств.</p> +<p>При использовании HTML и CSS разработчику необходимо использовать правильные примитивы. Firefox очень хорошо оптимизирован для скролла любого контента. Обычно это не является проблемой. Но очень часто, разменивая качество и стабильность на скорость, мы идём на ухищрения, которые могут "переоптимизировать" страницу так, что частота кадров будет выше нужной нам. Так как глаз всё равно слабо различает FPS больше 60, нет необходимости в таких оптимизациях. Одна из таких оптимизаций - использование статического рендера вместо CSS-градиента. В некоторых случаях это излишне. Чтобы не применять оптимизацию, вы можете воспользоваться <a href="/en-US/docs/Web/Guide/CSS/Media_queries">медиавыражениями</a>, которые позволят использовать подобные решения только для конкретных устройств.</p> <p>Множество приложений используют Transitions и Animations для перехода между страницами или панелями. Например, когда пользователь нажимает кнопку "Настройки", чтобы перейти на другой экран; или для вызова поп-апа. Firefox оптимизирован для выполнения переходов и анимаций для сцен, которые:</p> 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 <h3 id="CSS"> CSS</h3> -<p>По умолчанию, CSS рассматривается как блокирующий рендер (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">render blocking</a>) ресурс, так что браузер не отобразит контент, пока объектная модель CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>) не будет завершена. Поэтому начальный CSS файл должен небольшим, чтобы быть доставленным так быстро, как это возможно. Рекомендуется использовать media-queries для того, чтобы вместо одного монолитного css-файла грузить специализированные</p> +<p>По умолчанию CSS считается ресурсом, блокирующим рендеринг (<a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Critical_rendering_path">render blocking</a>). Это означает, что браузер не будет отображать контент до тех пор, пока не будет построена объектная модель CSS (<a href="https://developer.mozilla.org/en-US/docs/Web/API/CSS_Object_Model">CSSOM</a>). Поэтому CSS-файл должен быть небольшим, чтобы он был доставлен так быстро, насколько это возможно. Рекомендуется использовать медиавыражения, для того чтобы вместо одного монолитного CSS-файла грузить специализированные.</p> <pre><link href="style.css" rel="stylesheet" media="all"> <link href="portrait.css" rel="stylesheet" media="orientation:portrait"> |