diff options
Diffstat (limited to 'files/ru/web/css')
157 files changed, 287 insertions, 287 deletions
diff --git a/files/ru/web/css/@counter-style/additive-symbols/index.html b/files/ru/web/css/@counter-style/additive-symbols/index.html index b56b93fab9..c8781e4d40 100644 --- a/files/ru/web/css/@counter-style/additive-symbols/index.html +++ b/files/ru/web/css/@counter-style/additive-symbols/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@counter-style/additive-symbols --- <h2 id="Описание">Описание</h2> -<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>адиктивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> +<p>Дескриптор аддитивных символов аналогичен дескриптору <span class="seoSummary"> {{cssxref('symbols')}} </span>и позволяет пользователю указывать символы которые будут использоваться для представлений счетчика, когда значение дескриптора<span class="seoSummary"> {{cssxref('system')}} <em>аддитивное</em>. Дескриптор <code>additive-symbols</code> </span>определяет так называемые аддитивные кортежи<span class="seoSummary">, </span>каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес<span class="seoSummary">.</span> Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.</p> <p>Когда значение системного дескриптора является циклическим, числовым, буквенным, символическим или фиксированным, дескриптор <code>symbols</code> используется вместо аддитивных символов для указания символов счетчика.</p> diff --git a/files/ru/web/css/@document/index.html b/files/ru/web/css/@document/index.html index ff88ed667f..6db62af6a6 100644 --- a/files/ru/web/css/@document/index.html +++ b/files/ru/web/css/@document/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/@document --- <div>{{SeeCompatTable}}</div> -<p><strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> <span id="result_box" lang="ru"><span>ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа.</span> <span>Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.</span></span></p> +<p><strong><code>@document</code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/At-rule">at-rule</a> <span id="result_box" lang="ru"><span>ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа.</span> <span>Он разработан в основном для пользовательских таблиц стилей, хотя он ттакже может использоваться в авторских таблицах стилей.</span></span></p> <pre class="brush: css no-line-numbers">@document url("https://www.example.com/") { h1 { @@ -28,7 +28,7 @@ translation_of: Web/CSS/@document <p><span id="result_box" lang="ru"><span>Значения, предоставляемые функциям </span></span> <code>url()</code>, <code>url-prefix()</code>, <code>domain()</code>, и <code>media-document()</code> <span id="result_box" lang="ru"><span>могут быть необязательно заключены в одинарные или двойные кавычки.</span> <span>Значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span> должны быть заключены в кавычки.</span></span> .</p> -<p><span id="result_box" lang="ru"><span>Экранированные значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span>акже должны быть экранированы из CSS</span></span>. <span id="result_box" lang="ru"><span>Например,</span></span> <code>.</code> (период) <span id="result_box" lang="ru"><span>соответствует любому символу в регулярных выражениях</span></span>. <span id="result_box" lang="ru"><span>Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений</span></span> (<code>\.</code>), <span id="result_box" lang="ru"><span> А затем убежать от этой строки с помощью правил CSS </span></span> (<code>\\.</code>).</p> +<p><span id="result_box" lang="ru"><span>Экранированные значения, предоставляемые функции</span></span> <code>regexp()</code> <span id="result_box" lang="ru"><span>также должны быть экранированы из CSS</span></span>. <span id="result_box" lang="ru"><span>Например,</span></span> <code>.</code> (период) <span id="result_box" lang="ru"><span>соответствует любому символу в регулярных выражениях</span></span>. <span id="result_box" lang="ru"><span>Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений</span></span> (<code>\.</code>), <span id="result_box" lang="ru"><span> А затем убежать от этой строки с помощью правил CSS </span></span> (<code>\\.</code>).</p> <div class="note"> <p><strong>Примечание</strong>: <span id="result_box" lang="ru"><span>Существует версия -moz-prefixed этого свойства </span></span>— <code>@-moz-document</code>. <span id="result_box" lang="ru"><span>Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций</span></span> ({{bug(1035091)}}).</p> diff --git a/files/ru/web/css/@font-face/font-display/index.html b/files/ru/web/css/@font-face/font-display/index.html index a206c3778e..603b7a8a66 100644 --- a/files/ru/web/css/@font-face/font-display/index.html +++ b/files/ru/web/css/@font-face/font-display/index.html @@ -140,4 +140,4 @@ font-display: optional;</pre> <p>[1] За флагом.</p> -<p>[2] Эта возможность доступна, начиная с версии Firefox 46 с настрокой <code>layout.css.font-display.enabled</code>, по умолчанию <code>false</code>. См. ({{bug(1157064)}}).</p> +<p>[2] Эта возможность доступна, начиная с версии Firefox 46 с настройкой <code>layout.css.font-display.enabled</code>, по умолчанию <code>false</code>. См. ({{bug(1157064)}}).</p> diff --git a/files/ru/web/css/@font-face/font-family/index.html b/files/ru/web/css/@font-face/font-family/index.html index 6e71ec90cb..d2d516d713 100644 --- a/files/ru/web/css/@font-face/font-family/index.html +++ b/files/ru/web/css/@font-face/font-family/index.html @@ -48,7 +48,7 @@ font-family: examplefont; <tr> <th scope="col">Спецификация</th> <th scope="col">Статус</th> - <th scope="col">Комментрий</th> + <th scope="col">Комментарий</th> </tr> </thead> <tbody> diff --git a/files/ru/web/css/@font-feature-values/index.html b/files/ru/web/css/@font-feature-values/index.html index b6420db716..dc51cdf99e 100644 --- a/files/ru/web/css/@font-feature-values/index.html +++ b/files/ru/web/css/@font-feature-values/index.html @@ -39,7 +39,7 @@ translation_of: Web/CSS/@font-feature-values <dt><a name="@swash"><code>@swash</code></a></dt> <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd> <dt><a name="@annotation"><code>@annotation</code></a></dt> - <dd>Устанавливает имя фунции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: <code>ident1: 2</code> действительным , но <code>ident2: 2 4</code> нет.</dd> + <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: <code>ident1: 2</code> действительным , но <code>ident2: 2 4</code> нет.</dd> <dt><a name="@ornaments"><code>@ornaments</code></a></dt> <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd> <dt><a name="@stylistic"><code>@stylistic</code></a></dt> @@ -50,7 +50,7 @@ translation_of: Web/CSS/@font-feature-values <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: <code>ident1: 3</code> maps to <code>cv03=1</code>, and <code>ident2: 2 4</code> maps to <code>cv02=4</code>, but <code>ident2: 2 4 5</code> is invalid.</dd> </dl> -<h3 id="Формальный_синтаксиси">Формальный синтаксиси</h3> +<h3 id="Формальный_синтаксис">Формальный синтаксис</h3> {{csssyntax}} diff --git a/files/ru/web/css/@media/index.html b/files/ru/web/css/@media/index.html index c0b1b2ab86..d84acd05ca 100644 --- a/files/ru/web/css/@media/index.html +++ b/files/ru/web/css/@media/index.html @@ -54,7 +54,7 @@ translation_of: Web/CSS/@media <dd>Предназначен для синтезаторов речи.</dd> </dl> -<div class="note"><strong>Примечание:</strong> CSS2.1 и Media Queries 3 определили несколько дополнительных зачений (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), но они устарели в <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> и не рекомендуется к использованию.</div> +<div class="note"><strong>Примечание:</strong> CSS2.1 и Media Queries 3 определили несколько дополнительных значений (<code>tty</code>, <code>tv</code>, <code>projection</code>, <code>handheld</code>, <code>braille</code>, <code>embossed</code>, <code>aural</code>), но они устарели в <a href="http://dev.w3.org/csswg/mediaqueries/#media-types">Media Queries 4</a> и не рекомендуется к использованию.</div> <h2 id="Media_features" name="Media_features">Media Features</h2> diff --git a/files/ru/web/css/@namespace/index.html b/files/ru/web/css/@namespace/index.html index 1540c3892b..c654ee3abf 100644 --- a/files/ru/web/css/@namespace/index.html +++ b/files/ru/web/css/@namespace/index.html @@ -30,10 +30,10 @@ svg|a {} <p><code>@namespace</code> правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по неймспейсу и именам или атрибутам.</p> -<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> аттрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG"><svg></a> и <a href="/ru/docs/Web/MathML/Element/math"><math></a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p> +<p>В <a href="/ru/docs/HTML/HTML5">HTML5</a> существуют <a href="https://html.spec.whatwg.org/#foreign-elements">сторонние элементы</a> которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML элементы будут действовать так, как если бы они находились в пространстве имён (<code>http://www.w3.org/1999/xhtml</code>), также если они не имеют <code>xmlns</code> атрибута где-либо в документе, то такие элементы как <a href="/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/SVG"><svg></a> и <a href="/ru/docs/Web/MathML/Element/math"><math></a> будут ассоциироваться с их стандартными пространствами имён (<code>http://www.w3.org/2000/svg</code> and <code>http://www.w3.org/1998/Math/MathML</code>).</p> <div class="blockIndicator note"> -<p>Заметка: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то аттрибут не будет иметь неймспейса. Другими словами, аттрибуты не могут наследовать пространство имён элемента в котором они находятся.</p> +<p>Заметка: В XML, если префикс отличается от атрибута (Например, <code>xlink:href</code>), то атрибут не будет иметь неймспейса. Другими словами, атрибуты не могут наследовать пространство имён элемента в котором они находятся.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/@viewport/index.html b/files/ru/web/css/@viewport/index.html index 0fcedf8ecc..56ee461658 100644 --- a/files/ru/web/css/@viewport/index.html +++ b/files/ru/web/css/@viewport/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/@viewport <h2 id="Кратко">Кратко</h2> -<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> cсодержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> +<p><strong><code>@viewport</code></strong> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> содержит набор вложенных дескрипторов в блоке CSS, который разделен фигурными скобками. Эти дескрипторы управляют настройками видового экрана, в первую очередь на мобильных устройствах.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_-moz-focusring/index.html b/files/ru/web/css/_colon_-moz-focusring/index.html index 02c26e1b68..872ef81e58 100644 --- a/files/ru/web/css/_colon_-moz-focusring/index.html +++ b/files/ru/web/css/_colon_-moz-focusring/index.html @@ -35,7 +35,7 @@ translation_of: 'Web/CSS/:-moz-focusring' <p>Этот псевдокласс пока еще не определен ни в одной спецификации, хотя и прошел этап обсуждения в рабочей группе. По его итогам было решено внести его в группу селекторов 4 или 5.</p> -<h2 id="Совметимость_с_браузерами">Совметимость с браузерами</h2> +<h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> <p>{{CompatibilityTable}}</p> diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 7f93377c91..95ede05087 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -82,7 +82,7 @@ a:-webkit-any-link { <ul> <li><a href="/ru/docs/Learn/HTML/%D0%92%D0%B2%D0%B5%D0%B4%D0%B5%D0%BD%D0%B8%D0%B5_%D0%B2_HTML/%D0%A1%D0%BE%D0%B7%D0%B4%D0%B0%D0%BD%D0%B8%D0%B5_%D0%B3%D0%B8%D0%BF%D0%B5%D1%80%D1%81%D1%81%D1%8B%D0%BB%D0%BE%D0%BA">Создание гиперссылок</a></li> - <li>Cоответствует HTML элементам: <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><a></a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/area"><area></a></code> и <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><link></a></code> с атрибутом {{htmlattrxref("href", "a")}}</li> + <li>Соответствует HTML элементам: <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/a"><a></a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/area"><area></a></code> и <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/HTML/Element/link"><link></a></code> с атрибутом {{htmlattrxref("href", "a")}}</li> <li>Похожие CSS селекторы: <ul> <li><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/:visited">:visited</a></code></li> diff --git a/files/ru/web/css/_colon_checked/index.html b/files/ru/web/css/_colon_checked/index.html index 66316fe2d2..5216adcaf7 100644 --- a/files/ru/web/css/_colon_checked/index.html +++ b/files/ru/web/css/_colon_checked/index.html @@ -64,7 +64,7 @@ option:checked { <h3 id="Использование_скрытых_чекбоксов_чтобы_хранить_некоторые_булевские_значения_в_CSS">Использование скрытых чекбоксов, чтобы хранить некоторые булевские значения в CSS</h3> -<p>Пседокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p> +<p>Псевдокласс <code>:checked</code> применяется к скрытым чекбоксам в начале вашей страницы, которые могут использоваться, чтобы хранить некоторые динамические значения, используемые в CSS правилах. Следующий пример показывает, как скрывать/показывать некоторые расширяемые элементы, нажимая на кнопку (<a class="internal" href="/@api/deki/files/6246/=expandable-elements.html" title="Expandable elements through the :checked pseudoclass">открыть это демо</a>).</p> <pre class="brush: html"><!doctype html> <html> @@ -138,7 +138,7 @@ option:checked { <p>Также вы можете псевдокласс <code>:checked</code>, чтобы скрывать радиокнопки для того, чтобы создать, например, <strong>галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши</strong>. Загрузите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a> как вариант решения.</p> -<div class="note"><strong>Замечание:</strong> Для аналагично эффекта, но основанного на псевдоклассе <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> и без скрытых радиокнопок, смотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div> +<div class="note"><strong>Замечание:</strong> Для аналогично эффекта, но основанного на псевдоклассе <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover"><code>:hover</code></a> и без скрытых радиокнопок, смотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/CSS/:hover" title="CSS/:hover">:hover</a>.</div> <h2 id="Specifications" name="Specifications">Спецификации</h2> diff --git a/files/ru/web/css/_colon_default/index.html b/files/ru/web/css/_colon_default/index.html index 58e14d2db5..728ef70ae8 100644 --- a/files/ru/web/css/_colon_default/index.html +++ b/files/ru/web/css/_colon_default/index.html @@ -5,7 +5,7 @@ translation_of: 'Web/CSS/:default' --- <div>{{CSSRef}}</div> -<p> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы">псевдо-класс</a> <strong><code>:default</code></strong> находит элемент формы, установленный по умолчанию для группы связаных элементов.</p> +<p> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Псевдо-классы">псевдо-класс</a> <strong><code>:default</code></strong> находит элемент формы, установленный по умолчанию для группы связанных элементов.</p> <p>Этот селектор используется для элементов: {{htmlelement("button")}}, <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, <code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, и {{htmlelement("option")}} .</p> @@ -102,7 +102,7 @@ input:default + label { <th>Safari</th> </tr> <tr> - <td>Базовая потдержка</td> + <td>Базовая поддержка</td> <td>10.0</td> <td>{{CompatGeckoDesktop("2.0")}}</td> <td>{{CompatNo}}</td> @@ -125,7 +125,7 @@ input:default + label { <th>Safari Mobile</th> </tr> <tr> - <td>Базовая потдержка</td> + <td>Базовая поддержка</td> <td>{{CompatUnknown}}</td> <td>{{CompatGeckoMobile("2.0")}}</td> <td>{{CompatNo}}</td> diff --git a/files/ru/web/css/_colon_defined/index.html b/files/ru/web/css/_colon_defined/index.html index d7849d41db..7ba37de530 100644 --- a/files/ru/web/css/_colon_defined/index.html +++ b/files/ru/web/css/_colon_defined/index.html @@ -73,7 +73,7 @@ simple-custom:defined { text-decoration: underline; }</pre> -<p>Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не тилизованные элементы.</p> +<p>Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не стилизованные элементы.</p> <h3 id="результат">результат</h3> diff --git a/files/ru/web/css/_colon_dir/index.html b/files/ru/web/css/_colon_dir/index.html index 29efcb97b2..4e4562634e 100644 --- a/files/ru/web/css/_colon_dir/index.html +++ b/files/ru/web/css/_colon_dir/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:dir' <p><code>:dir()</code> учитывает только <em>семантическое </em>направление, т.е. заданное в самом документе. Он не учитывает <em>стилизованное </em>направление, т.е. заданное CSS-правилами, например {{cssxref("direction")}}.</p> <div class="note"> -<p><strong>Примечание:</strong> помните о том, что псевдокласс <code>:dir()</code> <strong>не эквивалентен</strong> <a href="/ru/docs/Web/CSS/Attribute_selectors">выбору по атрибуту</a> <code>[dir=…]</code>. Последний применяется только к тем элементам HTML, у которых есть атрибут {{htmlattrxref("dir")}}, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом <code>[dir=rtl]</code> и<code>[dir=ltr]</code> не будут включать <code>auto</code>.) <code>:dir()</code>, же, напротив, соостветсвует значению вычисленному {{glossary("user agent")}}, даже унаследованному.</p> +<p><strong>Примечание:</strong> помните о том, что псевдокласс <code>:dir()</code> <strong>не эквивалентен</strong> <a href="/ru/docs/Web/CSS/Attribute_selectors">выбору по атрибуту</a> <code>[dir=…]</code>. Последний применяется только к тем элементам HTML, у которых есть атрибут {{htmlattrxref("dir")}}, игнорируя те, у которых он не задан — даже если они унаследовали его значение. (Похожим образом <code>[dir=rtl]</code> и<code>[dir=ltr]</code> не будут включать <code>auto</code>.) <code>:dir()</code>, же, напротив, соответствует значению вычисленному {{glossary("user agent")}}, даже унаследованному.</p> </div> <div class="note"> diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html index 0a0a64c0ee..7fea9f419e 100644 --- a/files/ru/web/css/_colon_first/index.html +++ b/files/ru/web/css/_colon_first/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:first' }</pre> <div class="note"> -<p><strong>Обратите внимани:</strong> Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p> +<p><strong>Обратите внимание:</strong> Вы можете изменять не все CSS свойства в этом псевдо-классе. Вы можете изменять только внешние отступы, {{cssxref("orphans")}}, {{cssxref("widows")}}, и разбитие документа на страницы. Более того, вы можете использовать только <a href="/en-US/docs/Web/CSS/размер#Абсолютные_единицы_измерения_размера">абсолютные единицы измерения</a>, определяя внешние отступы. Все остальные правила будут проигнорированы.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_focus/index.html b/files/ru/web/css/_colon_focus/index.html index e0f65f8232..6bcab5d696 100644 --- a/files/ru/web/css/_colon_focus/index.html +++ b/files/ru/web/css/_colon_focus/index.html @@ -21,7 +21,7 @@ input:focus { }</pre> <div class="blockIndicator note"> -<p><strong>Примечание:</strong> Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусорованный элемент.</p> +<p><strong>Примечание:</strong> Этот псевдо-класс применяется только тогда, когда в фокусе находится сам элемент. Используйте {{CSSxRef(":focus-within")}}, если вы хотите выбрать элемент, в котором находится сфокусированный элемент.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_colon_has/index.html b/files/ru/web/css/_colon_has/index.html index bef25277dd..f452c58420 100644 --- a/files/ru/web/css/_colon_has/index.html +++ b/files/ru/web/css/_colon_has/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:has' <p><span class="seoSummary">CSS <a href="/Web/CSS/Псевдо-классы">псевдокласс </a><a href="/ru/docs/Web/CSS/Псевдо-классы"> </a><strong><code>:has()</code></strong> отображает элемент в том случае, если любой из селекторов, переданный в качестве параметра (относительно {{cssxref(":scope")}}), соответствует хотя бы одному элементу.</span></p> -<p>Псведокласс <code>:has()</code> берет соотвествующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, <code>:has</code> имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.</p> +<p>Псевдокласс <code>:has()</code> берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, <code>:has</code> имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: {{domxref("document.querySelector()")}} (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.</p> <pre class="brush: css no-line-numbers">/* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> */ /* Отмечу, что это не поддерживается ни одним из браузеров */ diff --git a/files/ru/web/css/_colon_hover/index.html b/files/ru/web/css/_colon_hover/index.html index 71e25b7e1b..f4d6299b00 100644 --- a/files/ru/web/css/_colon_hover/index.html +++ b/files/ru/web/css/_colon_hover/index.html @@ -28,7 +28,7 @@ translation_of: 'Web/CSS/:hover' <h3 id="Выпадающее_меню">Выпадающее меню</h3> -<p>С псевдоклассом <code>:hover</code> вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать <strong>выпадающие меню на чистом CSS</strong> (только на CSS, без использования <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Сущность этой техники - создание правил, типа следуюшего:</p> +<p>С псевдоклассом <code>:hover</code> вы можете создавать сложные каскадные алгоритмы. Эта техника часто используется, например, чтобы создать <strong>выпадающие меню на чистом CSS</strong> (только на CSS, без использования <a href="/en/JavaScript" title="en/JavaScript">JavaScript</a>). Сущность этой техники - создание правил, типа следующего:</p> <pre class="brush: css">div.menu-bar ul ul { display: none; @@ -76,7 +76,7 @@ div.menu-bar li:hover > ul { <p>Вы можете использовать псевдокласс <code>:hover</code>, чтобы создать галерею изображений с полноразмерными картинками, показываемыми при наведении на них мыши. Посмотрите <a class="internal" href="/@api/deki/files/6247/=css-gallery.zip" title="css-gallery.zip">это демо</a>.</p> -<div class="note"><strong>Замечания:</strong> Для аналагичного эффекта, но основанного на псевдоклассе<a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (применяется к скрытым радиокнопкам), смотрите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/Web/CSS/:checked" title="ru/CSS/:checked">ru/CSS/:checked</a>.</div> +<div class="note"><strong>Замечания:</strong> Для аналогичного эффекта, но основанного на псевдоклассе<a class="internal" href="/en/CSS/%3Achecked" title="en/CSS/:checked"><code>:checked</code></a> (применяется к скрытым радиокнопкам), смотрите <a class="internal" href="/@api/deki/files/6268/=css-checked-gallery.zip" title="css-checked-gallery.zip">это демо</a>, взятое со страницы <a class="internal" href="/ru/docs/Web/CSS/:checked" title="ru/CSS/:checked">ru/CSS/:checked</a>.</div> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/_colon_indeterminate/index.html b/files/ru/web/css/_colon_indeterminate/index.html index 94741f8130..6975e1d6ee 100644 --- a/files/ru/web/css/_colon_indeterminate/index.html +++ b/files/ru/web/css/_colon_indeterminate/index.html @@ -20,7 +20,7 @@ input:indeterminate { <ul> <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/checkbox"><input type="checkbox"></a></code>, свойство <code>indeterminate</code> которых было установлено в <code>true</code> через <a href="/en-US/docs/Web/JavaScript">JavaScript</a></li> - <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, когда все радио переключатели в одной группе (с одинаковым атрибутом <code>name</code>) невыбраны</li> + <li>Элементы <code><a href="/en-US/docs/Web/HTML/Element/input/radio"><input type="radio"></a></code>, когда все радио переключатели в одной группе (с одинаковым атрибутом <code>name</code>) не выбраны</li> <li>Элементы {{HTMLElement("progress")}} в неопределённом состоянии</li> </ul> diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index 3b1a61da98..084876125f 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/:is' <p><strong><code>:is()</code></strong> это функция <a href="/ru/docs/Web/CSS">псевдо-класс CSS</a> принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.</p> -<p>Заметьте, что в данный момент бразуеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> +<p>Заметьте, что в данный момент браузеры поддерживают ее функционал как <code>:matches()</code>, или даже как более старый, префиксный псевдо-класс — <code>:any()</code>, включая старые версии Chrome, Firefox, и Safari. <code>:any()</code> работает точно таким же образом как и <code>:matches()</code>/<code>:is()</code>, за исключением того, что <code>:any()</code> требует постановку префиксов и не поддерживает <a href="/ru/docs/Learn/CSS/Building_blocks/Селекторы">комплексные селекторы</a>.</p> <pre class="brush: css no-line-numbers notranslate">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { @@ -197,7 +197,7 @@ h1 { <h3 id="Как_избежать_аннулирования_списка_селекторов">Как избежать аннулирования списка селекторов</h3> -<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается бразуером.</p> +<p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдо-класс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.</p> <pre class="brush: css notranslate">:is(:valid, :unsupported) { ... @@ -209,7 +209,7 @@ h1 { ... }</pre> -<p>Будет проигнорировано бразуерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p> +<p>Будет проигнорировано браузерами, которые не поддерживают <code>:unsupported</code> даже если они поддерживают <code>:valid</code>.</p> <h3 id="Разница_между_is_и_where">Разница между :is() и :where()</h3> diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html index 3f1c1aeadb..014fc3a363 100644 --- a/files/ru/web/css/_colon_placeholder-shown/index.html +++ b/files/ru/web/css/_colon_placeholder-shown/index.html @@ -189,6 +189,6 @@ input.studentid:placeholder-shown { <ul> <li>Псевдоэлемент {{cssxref("::placeholder")}}, применяющий стили к <em>самому себе</em>.</li> - <li>Связянные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> + <li>Связанные HTML элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}</li> <li><a href="/ru/docs/Learn/HTML/Forms">HTML формы</a></li> </ul> diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html index 9ff6328071..8f072788b3 100644 --- a/files/ru/web/css/_colon_target/index.html +++ b/files/ru/web/css/_colon_target/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/:target' <pre>http://www.example.com/index.html#section2</pre> -<p>Следующий элмент будет выбран селектором <code>:target</code>, если текущий URL равен вышеуказанному:</p> +<p>Следующий элемент будет выбран селектором <code>:target</code>, если текущий URL равен вышеуказанному:</p> <pre class="brush: html"><section id="section2">Example</section></pre> diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html index 7ad6df8e89..eeee1f3600 100644 --- a/files/ru/web/css/_colon_visited/index.html +++ b/files/ru/web/css/_colon_visited/index.html @@ -12,9 +12,9 @@ translation_of: 'Web/CSS/:visited' <p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдо-класс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдо-классами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вам нужно вставлять правило <code>:visited</code> до правила <code>:link</code>, но после других, определённых <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p> <div class="note style-wrap"> -<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосещённых ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосещённых ссылок).</p> +<p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдо-класс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Заметьте также, что альфа-канал будет игнорироваться: будет использоваться альфа-канал, используемый для непосвященных ссылок вместо него (но если прозрачность - <code>0</code>, то в этот случае игнорируется весь цвет, и один из используемых стилей для непосвященных ссылок).</p> -<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосещённых ссылок.</p> +<p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосвященных ссылок.</p> <p>Для дополнительной информации об ограничениях и их причин, смотрите <a href="/ru/docs/CSS/Privacy_and_the_:visited_selector" title="/ru/docs/CSS/Privacy_and_the_:visited_selector">Приватность и селектор :visited</a>.</p> </div> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 7f7538cf52..b432a06efd 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -34,7 +34,7 @@ footer p:hover { <p>В спецификации псевдоклассы <code>:is()</code> и <code>:where()</code> относятся к так называемому <a href="https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list">forgiving selector list</a> (прощающий список селекторов).</p> -<p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет неккоректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p> +<p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p> <pre class="brush: css notranslate">:where(:valid, :unsupported) { ... @@ -86,7 +86,7 @@ footer p:hover { </footer> </article></pre> -<p>В примере выше у нас представлено две статьи, каждая из которых содержит следующиее блоки: <code>section</code>, <code>aside</code> и <code>footer</code>. Каждый из блоков имеет свой CSS-класс.</p> +<p>В примере выше у нас представлено две статьи, каждая из которых содержит следующие блоки: <code>section</code>, <code>aside</code> и <code>footer</code>. Каждый из блоков имеет свой CSS-класс.</p> <p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p> @@ -143,7 +143,7 @@ footer p:hover { <h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> <div> -<div class="hidden">Таблица совместимости на этой странице сгенерирована из готовых данных. Если бы вы хотели добавить свою информацию, пожалуйста проверьте на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пулл-реквест.</div> +<div class="hidden">Таблица совместимости на этой странице сгенерирована из готовых данных. Если бы вы хотели добавить свою информацию, пожалуйста проверьте на <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам пул-реквест.</div> <p>{{Compat("css.selectors.where")}}</p> </div> diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html index 086ccfa4ab..e25e60f003 100644 --- a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html +++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::-webkit-slider-thumb' <h2 id="Спецификация">Спецификация</h2> -<p>Не является частью какой либо спецефикации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.</p> +<p>Не является частью какой либо спецификации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.</p> <h2 id="См._также">См. также</h2> diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html index 653ddde995..62837decd3 100644 --- a/files/ru/web/css/_doublecolon_backdrop/index.html +++ b/files/ru/web/css/_doublecolon_backdrop/index.html @@ -46,7 +46,7 @@ dialog::backdrop { <p><img alt="" src="https://mdn.mozillademos.org/files/16287/bbb-backdrop.png" style="height: 282px; width: 500px;"></p> -<p>Обратите внимание на эффект серо-голуых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.</p> +<p>Обратите внимание на эффект серо-голубых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html index d9ec831b57..9ea4f8a876 100644 --- a/files/ru/web/css/_doublecolon_cue/index.html +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -14,7 +14,7 @@ translation_of: 'Web/CSS/::cue' <h2 id="Разрешённые_свойства">Разрешённые свойства</h2> -<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS свойст следующим списком:</p> +<p>Правила с <code>::cue</code> в селекторе ограничены в использовании CSS свойств следующим списком:</p> <ul> <li>{{CSSxRef("background")}} и его свойства</li> @@ -31,7 +31,7 @@ translation_of: 'Web/CSS/::cue' <li>{{CSSxRef("white-space")}}</li> </ul> -<p>Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является <code>background</code> и его сокращённые свойства, которые прменяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.</p> +<p>Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является <code>background</code> и его сокращённые свойства, которые применяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html index f6cb3180e8..467a9e1e0b 100644 --- a/files/ru/web/css/_doublecolon_first-letter/index.html +++ b/files/ru/web/css/_doublecolon_first-letter/index.html @@ -110,7 +110,7 @@ p::first-letter { <tr> <td>{{ SpecName('CSS2.1', 'selector.html#first-letter', '::first-letter') }}</td> <td>{{ Spec2('CSS2.1') }}</td> - <td>Нет измененений.</td> + <td>Нет измененный.</td> </tr> <tr> <td>{{ SpecName('CSS1', '#the-first-letter-pseudo-element', '::first-letter') }}</td> diff --git a/files/ru/web/css/_doublecolon_first-line/index.html b/files/ru/web/css/_doublecolon_first-line/index.html index c63c7d3584..274f6e85c2 100644 --- a/files/ru/web/css/_doublecolon_first-line/index.html +++ b/files/ru/web/css/_doublecolon_first-line/index.html @@ -95,7 +95,7 @@ p::first-line { <tr> <td>{{SpecName('CSS2.1', 'selector.html#first-line-pseudo', '::first-line')}}</td> <td>{{Spec2('CSS2.1')}}</td> - <td>Нет измененений.</td> + <td>Нет измененный.</td> </tr> <tr> <td>{{SpecName('CSS1', '#the-first-line-pseudo-element', '::first-line')}}</td> diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html index 1db392cd80..f6a33ebf00 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.html +++ b/files/ru/web/css/_doublecolon_grammar-error/index.html @@ -22,7 +22,7 @@ translation_of: 'Web/CSS/::grammar-error' <li>{{cssxref("cursor")}}</li> <li>{{cssxref("caret-color")}}</li> <li>{{cssxref("outline")}} и его полные формы</li> - <li>{{cssxref("text-decoration")}} и связанные свойсва</li> + <li>{{cssxref("text-decoration")}} и связанные свойства</li> <li>{{cssxref("text-emphasis-color")}}</li> <li>{{cssxref("text-shadow")}}</li> </ul> diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html index 3d0a39dfcb..8eb701150c 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.html +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -19,7 +19,7 @@ translation_of: 'Web/CSS/::placeholder' <p>В <code>::placeholder</code> можно использовать только те CSS свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.</p> <div class="note"> -<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светлосерый текст.</p> +<p><strong>Note:</strong> В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> @@ -108,7 +108,7 @@ translation_of: 'Web/CSS/::placeholder' <h3 id="Метки">Метки</h3> -<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} аттрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p> +<p>Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} атрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.</p> <ul> <li><a href="/en-US/docs/Web/Accessibility/ARIA/forms/Basic_form_hints">MDN Basic form hints</a></li> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index ca24b32411..d0663700f2 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -28,7 +28,7 @@ translation_of: 'Web/CSS/::slotted' <p>Следующие фрагменты взяты из нашей демо <a href="https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element">slotted-pseudo-element</a> (<a href="https://mdn.github.io/web-components-examples/slotted-pseudo-element/">see it live also</a>).</p> -<p>В этом демо мы использовали простой шаблом с тремя слотами:</p> +<p>В этом демо мы использовали простой шаблон с тремя слотами:</p> <pre class="brush: html notranslate"><template id="person-template"> <div> diff --git a/files/ru/web/css/actual_value/index.html b/files/ru/web/css/actual_value/index.html index 10d233d98f..d5fb579491 100644 --- a/files/ru/web/css/actual_value/index.html +++ b/files/ru/web/css/actual_value/index.html @@ -12,7 +12,7 @@ original_slug: Web/CSS/Действительное_значение <h2 id="Описание">Описание</h2> -<p><strong>Действительное значение</strong> CSS свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет прининудительно округлять ширину.</p> +<p><strong>Действительное значение</strong> CSS свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html index fa33c365da..632ac959d2 100644 --- a/files/ru/web/css/all/index.html +++ b/files/ru/web/css/all/index.html @@ -91,7 +91,7 @@ blockquote { background-color: skyblue; color: red; } blockquote { all: unset; }</pre> {{EmbedLiveSample("ex1", "200", "125")}} -<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>inline</em> элемент (начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), но его {{cssxref("font-size")}} по-прежнему <code>small</code> унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значени).</p> +<p>{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это <em>inline</em> элемент (начальное значение), его {{cssxref("background-color")}} является <code>transparent</code> (начальное значение), но его {{cssxref("font-size")}} по-прежнему <code>small</code> унаследованное значение) и его {{cssxref("color")}} является <code>blue</code> (унаследованное значение).</p> </div> <div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;"> diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html index 19a6acc16f..782c6c4fe5 100644 --- a/files/ru/web/css/angle/index.html +++ b/files/ru/web/css/angle/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/angle <p>Тип данных <code><angle></code> состоит из числа ({{cssxref("<number>")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После <code>0</code> указывать единицу измерения необязательно.</p> -<p>Опционально перед числом может стоять знак <code>+</code> или <code>-</code> . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, <code>90deg</code> равняется <code>-270deg</code>, а <code>1turn</code> равняется <code>4turn</code>. Тем не менее, для достижения динамических свойств эфект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}. </p> +<p>Опционально перед числом может стоять знак <code>+</code> или <code>-</code> . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, <code>90deg</code> равняется <code>-270deg</code>, а <code>1turn</code> равняется <code>4turn</code>. Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}. </p> <h3 id="Единицы_измерения">Единицы измерения</h3> diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html index c645cafc25..55e5c537eb 100644 --- a/files/ru/web/css/animation-delay/index.html +++ b/files/ru/web/css/animation-delay/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/animation-delay <h2 id="Описание">Описание</h2> -<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задежки перед стартом анимации.</p> +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-delay</code></strong> определяет время задержки перед стартом анимации.</p> <p>{{EmbedInteractiveExample("pages/css/animation-delay.html")}}</p> @@ -31,7 +31,7 @@ animation-delay: 2s, 4ms; <dl> <dt><code><time></code></dt> - <dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в милисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd> + <dd>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/animation-iteration-count/index.html b/files/ru/web/css/animation-iteration-count/index.html index a39a63842f..653e843e65 100644 --- a/files/ru/web/css/animation-iteration-count/index.html +++ b/files/ru/web/css/animation-iteration-count/index.html @@ -36,7 +36,7 @@ animation-iteration-count: 2, 0, infinite; <dt><code>infinite</code></dt> <dd>Анимация повторяется бесконечно.</dd> <dt><code><number></code></dt> - <dd>Сколько раз анимация будет повторяться; по-умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd> + <dd>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведет половину анимационного цикла).</dd> </dl> <h3 id="Правила_синтаксиса">Правила синтаксиса</h3> @@ -128,6 +128,6 @@ animation-iteration-count: 2, 0, infinite; <h2 id="Также_смотрите">Также смотрите</h2> <ul> - <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Ипользование CSS анимацией</a></li> + <li><a href="/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy" title="Обучение CSS анимациям">Использование CSS анимацией</a></li> <li>{{ domxref("AnimationEvent", "AnimationEvent") }}</li> </ul> diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html index 4a7c3ff3da..2e6ff16b28 100644 --- a/files/ru/web/css/animation-name/index.html +++ b/files/ru/web/css/animation-name/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/animation-name <h2 id="Описание">Описание</h2> -<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-name</code></strong> задаёт список анимаций, чтобы примененить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.</p> +<p><a href="/en-US/docs/CSS" title="CSS">CSS</a> свойство <strong><code>animation-name</code></strong> задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.</p> <div>{{EmbedInteractiveExample("pages/css/animation-name.html")}}</div> @@ -40,7 +40,7 @@ animation-name: <a href="/en-US/docs/Web/CSS/unset">unset</a> <dt><code>none</code></dt> <dd>Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.</dd> <dt>{{cssxref("custom-ident","<custom-ident>")}}</dt> - <dd>Строка, идентифицирующая анимацию. Этот индентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> + <dd>Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учета регистра от <code>a</code> до <code>z</code>, цифр от <code>0</code> до <code>9</code>, подчеркивания (<code>_</code>), и/или черты (<code>-</code>). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть <code>none</code>, <code>unset</code>, <code>initial</code>, или <code>inherit</code> в любой комбинации случаев.</dd> </dl> <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> diff --git a/files/ru/web/css/appearance/index.html b/files/ru/web/css/appearance/index.html index a150d04a99..3ae986fbd9 100644 --- a/files/ru/web/css/appearance/index.html +++ b/files/ru/web/css/appearance/index.html @@ -2631,7 +2631,7 @@ div{ color: black; } </pre> -<p>Смотрите также <a href="http://jsfiddle.net/go392m5s/">this JSFiddle</a> в качестве примера, показывающего как вы можете использвать <code>appearance: none</code> для стилизации радио кнопок и чекбоксов.</p> +<p>Смотрите также <a href="http://jsfiddle.net/go392m5s/">this JSFiddle</a> в качестве примера, показывающего как вы можете использовать <code>appearance: none</code> для стилизации радио кнопок и чекбоксов.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html index 290db85234..2b8ac3861c 100644 --- a/files/ru/web/css/attribute_selectors/index.html +++ b/files/ru/web/css/attribute_selectors/index.html @@ -13,11 +13,11 @@ translation_of: Web/CSS/Attribute_selectors <dt><code>[<em>attr</em>]</code></dt> <dd>Обозначает элемент с атрибутом по имени attr.</dd> <dt><code>[<em>attr</em>=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr и значением в точности сопадающим с value.</dd> + <dd>Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.</dd> <dt><code>[<em>attr</em>~=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr значением которого является набор слов разделенных пробелами, одно из которых в точности равно value</dd> <dt><code>[<em>attr</em>|=<em>value</em>]</code></dt> - <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подкодом.</dd> + <dd>Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.</dd> <dt><code>[<em>attr</em>^=<em>value</em>]</code></dt> <dd>Обозначает элемент с именем атрибута attr значение которого начинается с "value"</dd> <dt><code>[<em>attr</em>$=<em>value</em>]</code></dt> diff --git a/files/ru/web/css/backface-visibility/index.html b/files/ru/web/css/backface-visibility/index.html index c95ad5645a..f6bf261e3b 100644 --- a/files/ru/web/css/backface-visibility/index.html +++ b/files/ru/web/css/backface-visibility/index.html @@ -196,7 +196,7 @@ th, p, td { <h2 id="Совместимость_с_браузерами">Совместимость с браузерами</h2> -<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотритеt <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> +<div class="hidden">Таблица совместимости на этой странице генерируется из структурированных данных. Если вы хотите внести свой вклад в эти данные, просмотрите <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> и отправьте нам запрос на извлечение.</div> <p>{{Compat("css.properties.backface-visibility")}}</p> diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html index 8f00a3a5ef..17584b482c 100644 --- a/files/ru/web/css/background-color/index.html +++ b/files/ru/web/css/background-color/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/background-color <p>{{EmbedInteractiveExample("pages/css/background-color.html")}}</p> -<h2 id="Cинтаксис">Cинтаксис</h2> +<h2 id="Синтаксис">Синтаксис</h2> <pre class="brush: css no-line-numbers">/* Словесные значения */ background-color: red; diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index ac0c6486f8..095ff8ee1e 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/background-image <p>Если указанное изображение не может быть нарисовано (например, когда файл, определенный указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением <code>none</code>.</p> -<div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозначно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать аттрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div> +<div class="note"><strong>Обратите внимание:</strong> Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.</div> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/background-origin/index.html b/files/ru/web/css/background-origin/index.html index 8709aa7032..849a858b88 100644 --- a/files/ru/web/css/background-origin/index.html +++ b/files/ru/web/css/background-origin/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/background-origin --- <div>{{CSSRef}}</div> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-origin</code></strong> устанавливает <em>область расположения фона</em>. Другими словами, оно устанавливает исходную позицию изображения, установленнную с помощью свойства {{cssxref("background-image")}}.</p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background-origin</code></strong> устанавливает <em>область расположения фона</em>. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства {{cssxref("background-image")}}.</p> <div>{{EmbedInteractiveExample("pages/css/background-origin.html")}}</div> @@ -15,7 +15,7 @@ translation_of: Web/CSS/background-origin <div class="note"><strong>Примечание:</strong> Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.</div> -<h2 id="Синаксис">Синаксис</h2> +<h2 id="Синтаксис">Синтаксис</h2> <pre class="brush: css no-line-numbers">/* Ключевые значения */ background-origin: border-box; diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html index 1942e76fda..3aaa1af51e 100644 --- a/files/ru/web/css/background-position-x/index.html +++ b/files/ru/web/css/background-position-x/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/background-position-x -<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применеными после его объявления.</p> +<p>Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} примененными после его объявления.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html index 9699a22440..76eb8e36a1 100644 --- a/files/ru/web/css/background-repeat/index.html +++ b/files/ru/web/css/background-repeat/index.html @@ -87,7 +87,7 @@ background-repeat: unset;</code></pre> </tr> <tr> <td><code>space</code></td> - <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фоновго изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td> + <td>Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение <code>space</code>.</td> </tr> <tr> <td><code>round</code></td> diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html index cc7b17241d..f93b74acd7 100644 --- a/files/ru/web/css/background-size/index.html +++ b/files/ru/web/css/background-size/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/background-size <p>Значение <strong><code>background-size</code></strong> в <a href="/en-US/docs/CSS" title="CSS">CSS</a> позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.</p> -<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращеного свойства.</div> +<div class="note"><strong>Предупреждение:</strong> Если значение этого свойства не задано в сокращенном свойстве {{cssxref("background")}}, которое применяется к элементу после CSS свойства <code>background-size</code>, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращенного свойства.</div> <p>{{cssinfo}}</p> @@ -63,14 +63,14 @@ background-size: unset; <p>Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.</p> <div class="note"> -<p><strong>Предупреждение: </strong>Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропоцией, идентичной пропорции области расположения фона.</p> +<p><strong>Предупреждение: </strong>Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.</p> </div> -<p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответсвуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответсвующей внутренней пропорцией.</p> +<p>Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.</p> <div class="note"><strong>Предупреждение:</strong> Это не определенное в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.</div> -<p>Визуализированный размер фоного изображения затем вычисляется следующим способом:</p> +<p>Визуализированный размер фонового изображения затем вычисляется следующим способом:</p> <dl> <dt><font face="Open Sans, Arial, sans-serif">Если оба атрибута в </font><code>background-size</code> заданы и различны от <code>auto</code>:</dt> @@ -78,9 +78,9 @@ background-size: unset; <dt>Если <code>background-size</code> содержит <code>contain</code> или <code>cover</code>:</dt> <dd>Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает ее. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.</dd> <dt>Если <code>background-size</code> установлен как <code>auto</code> или <code>auto auto</code>:</dt> - <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропоцию, оно отображается с использованием внутреннего размера и соответсвующим размером области позиционирования фона.</dd> + <dd>Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан <code>contain</code>. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определенным этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.</dd> <dt>Если background-size содержит один атрибут <code>auto</code> и один не-<code>auto</code>:</dt> - <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответсвующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd> + <dd>Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.</dd> </dl> <p>Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, еще не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.</p> diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html index 6971e339a0..7b39d9589c 100644 --- a/files/ru/web/css/background/index.html +++ b/files/ru/web/css/background/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/background --- <div>{{CSSRef("CSS Background")}}</div> -<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанаваливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> +<div>Сокращенное <a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>background</code></strong> устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.</div> <div></div> diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html index 741c116103..9841ac6e97 100644 --- a/files/ru/web/css/border-image-slice/index.html +++ b/files/ru/web/css/border-image-slice/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/border-image-slice <h2 id="Описание">Описание</h2> -<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это просходит путем указания 4 внутренних смещений.</p> +<p>CSS свойство <strong><code>border-image-slice</code></strong> делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путем указания 4 внутренних смещений.</p> <p><a href="/files/3814/border-image-slice.png" style="float: left;"><img alt="The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties" src="/files/3814/border-image-slice.png" style="height: 132px; margin: 1px; padding: 1em; width: 250px;"></a>Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.</p> diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html index ee12ecad6b..263d4887c5 100644 --- a/files/ru/web/css/border-radius/index.html +++ b/files/ru/web/css/border-radius/index.html @@ -62,7 +62,7 @@ border-radius: unset; <ul> <li>одно, два, три или четыре значения {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Используется для задания обычного радиуса углов.</li> - <li>одна, две, три или четыре пары значений <code><length></code> or <code><percentage></code>, разделённые "/". Используется для задания эллиптического склугления.</li> + <li>одна, две, три или четыре пары значений <code><length></code> or <code><percentage></code>, разделённые "/". Используется для задания эллиптического скругления.</li> </ul> <h3 id="Значения">Значения</h3> @@ -77,7 +77,7 @@ border-radius: unset; <tr> <td style="vertical-align: top;"><em>top-left-and-bottom-right</em></td> <td><img alt="top-left-bottom-right.png" class="default internal" src="/@api/deki/files/6141/=top-left-bottom-right.png"></td> - <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для верхнего левого и нижного правого угла элемента. Следует использовать синтаксис с двумя значениями.</td> + <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.</td> </tr> <tr> <td style="vertical-align: top;"><em>top-right-and-bottom-left</em></td> @@ -92,12 +92,12 @@ border-radius: unset; <tr> <td style="vertical-align: top;"><em>top-right</em></td> <td style="margin-left: 2px;"><img alt="top-right.png" class="default internal" src="/@api/deki/files/6144/=top-right.png"></td> - <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td> + <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.</td> </tr> <tr> <td style="vertical-align: top;"><em>bottom-right</em></td> <td style="margin-left: 2px;"><img alt="bottom-rigth.png" class="default internal" src="/@api/deki/files/6140/=bottom-rigth.png"></td> - <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} уставливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td> + <td style="vertical-align: top;">{{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.</td> </tr> <tr> <td style="vertical-align: top;"><em>bottom-left</em></td> diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html index 9f116b5eda..6ae7e6460b 100644 --- a/files/ru/web/css/border/index.html +++ b/files/ru/web/css/border/index.html @@ -5,7 +5,7 @@ tags: - CSS Границы - CSS свойства - Разметка - - СовместимостьМобильныхБраузеров + - Совместимость Мобильных Браузеров - Справка translation_of: Web/CSS/border --- @@ -15,7 +15,7 @@ translation_of: Web/CSS/border <div>{{EmbedInteractiveExample("pages/css/border.html")}}</div> -<p>Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное занчение. Обратите внимание, <code>border</code> не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. <code>none</code>.</p> +<p>Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, <code>border</code> не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. <code>none</code>.</p> <pre class="brush: css no-line-numbers">border: 1px; border: 2px dotted; diff --git a/files/ru/web/css/box-shadow/index.html b/files/ru/web/css/box-shadow/index.html index 0d687d431c..b50dded28d 100644 --- a/files/ru/web/css/box-shadow/index.html +++ b/files/ru/web/css/box-shadow/index.html @@ -53,7 +53,7 @@ box-shadow: unset; <ul> <li>Если задано только два значения, они интерпретируется как <code><a href="#<offset-x> <offset-y>"><offset-x><offset-y></a></code> values.</li> <li>Если задано третье значение, оно понимается как <code><a href="#<blur-radius>"><blur-radius></a></code>.</li> - <li>Если задано чертвёртое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> + <li>Если задано четвертое значение, оно интерпретируется <code><a href="#<spread-radius>"><spread-radius></a></code>.</li> </ul> </li> <li>Дополнительно, можно задать ключевое слово <code><a href="#inset">inset</a></code>.</li> @@ -72,7 +72,7 @@ box-shadow: unset; <dd>Существуют 2 значения {{ cssxref("<length>") }}, которые устанавливают смещение тени. <code><offset-x></code> определяет горизонтальное расстояние. Отрицательные значения располагают тень слева от элемента. <code><offset-y></code> определяет вертикальное расстояние. Отрицательные значения располагают тень выше элемента. Посмотрите какие единицы {{ cssxref("<length>") }} можно задать.<br> Если оба значения равны <code>0</code>, то тень расположится за элементом (и будет отображаться размытие, если <code><blur-radius></code> и/или <code><spread-radius></code> установлены).</dd> <dt><a id="<blur-radius>" name="<blur-radius>"><code><blur-radius></code></a></dt> - <dd>Это третье значение {{ cssxref("<length>") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться <code>0</code> (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следущее:</dd> + <dd>Это третье значение {{ cssxref("<length>") }}. Чем больше это значение, тем больше и светлее размытие. Отрицательные значения не поддерживаются. Если не определено, будет использоваться <code>0</code> (резкий край тени). Спецификация не содержит в себе точного алгоритма расчёта размытости теней, однако, в ней указано следующее:</dd> <dd> <blockquote>…for a long, straight shadow edge, this should create a color transition the length of the blur distance that is perpendicular to and centered on the shadow’s edge, and that ranges from the full shadow color at the radius endpoint inside the shadow to fully transparent at the endpoint outside it.</blockquote> </dd> diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index 5d36f2ea33..f0d5760e9e 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -27,12 +27,12 @@ translation_of: Web/CSS/box-sizing </ul> <div class="blockIndicator note"> -<p><strong>Примечание: </strong>Часто выставление <code>box-sizing: border-box</code> полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устранаяет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя <code>position-relative</code> или <code>position: absolute</code>, <code>box-sizing: content-box</code> позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.</p> +<p><strong>Примечание: </strong>Часто выставление <code>box-sizing: border-box</code> полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя <code>position-relative</code> или <code>position: absolute</code>, <code>box-sizing: content-box</code> позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.</p> </div> <h2 id="Syntax" name="Syntax">Синтаксис</h2> -<p>Для свойства <code>box-sizing</code> устанавливается единственное ключевое слово из списка значени ниже.</p> +<p>Для свойства <code>box-sizing</code> устанавливается единственное ключевое слово из списка значений ниже.</p> <h3 id="Values" name="Values">Значения</h3> @@ -117,7 +117,7 @@ translation_of: Web/CSS/box-sizing <p>{{cssinfo}}</p> -<h2 id="Browser_compatibility" name="Browser_compatibility">Совмествимость с браузерами</h2> +<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость с браузерами</h2> <p>{{Compat("css.properties.box-sizing")}}</p> diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 6f5b561a35..5dd08d22f0 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/calc() --- <div>{{CSSRef}}</div> -<p><code>calc()</code> - это функция CSS, которая даёт возможность расчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.</p> +<p><code>calc()</code> - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.</p> <p>{{EmbedInteractiveExample("pages/css/function-calc.html")}}</p> @@ -30,7 +30,7 @@ translation_of: Web/CSS/calc() <div class="note"><strong>Внимание:</strong> Деление на ноль выдаст ошибку при парсинге HTML.</div> -<div class="note"><strong>Note:</strong> Операторы + и - всегда должны быть по обеим сторонам отеделены пробелом. Выражение <code>calc(50% -8px)</code> будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как <code>calc(50% - 8px)</code> - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.<br> +<div class="note"><strong>Note:</strong> Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение <code>calc(50% -8px)</code> будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как <code>calc(50% - 8px)</code> - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.<br> Операторы * и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.</div> <dl> @@ -85,7 +85,7 @@ translation_of: Web/CSS/calc() } </pre> -<p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следущему HTML-коду:</p> +<p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:</p> <pre class="brush: html notranslate"><form> <div id="formbox"> diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 9f648d00c0..4411cbf891 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -32,7 +32,7 @@ width: 64px;</pre> <p><em>Предпочитаемое значение</em> – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.</p> -<p><em>Максимальное значение</em> – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхную границу допустимого диапазона.</p> +<p><em>Максимальное значение</em> – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхнюю границу допустимого диапазона.</p> <p>Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции <code>calc()</code>. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.</p> diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html index ce498a8a2b..714ac4588e 100644 --- a/files/ru/web/css/class_selectors/index.html +++ b/files/ru/web/css/class_selectors/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/Class_selectors <pre class="syntaxbox">.classname { <em>style properties</em> }</pre> -<p>Это эквивалетно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:</p> +<p>Это эквивалентно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:</p> <pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre> diff --git a/files/ru/web/css/clip-path/index.html b/files/ru/web/css/clip-path/index.html index dda764f515..69fe7f99ed 100644 --- a/files/ru/web/css/clip-path/index.html +++ b/files/ru/web/css/clip-path/index.html @@ -463,7 +463,7 @@ svg text.em { <dt><code>stroke-box</code></dt> <dd>Использует stroke bounding box в качестве базовой области.</dd> <dt><code>view-box</code></dt> - <dd>Использует ближайший SVG viewport в качестве базового блока. Если отриут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> + <dd>Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определен для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом <code>viewBox</code> и ширина и высота базового блока устанавливаются равными значениям атрибута <code>viewBox</code>.</dd> <dt><code>margin-box</code></dt> <dd>Использует <a href="CSS_Box_Model/Introduction_to_the_CSS_box_model">margin box</a> в качестве базового блока.</dd> <dt><code>border-box</code></dt> diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index f40f69bcd3..08edbe380a 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -5,26 +5,26 @@ translation_of: Web/CSS/color_value --- <div>{{CSSRef}}</div> -<p>Тип <strong><code><color></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> предоставляет цвет в цветовом спектре <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB</a>. В <code><color></code> может включать значения прозрачности Альфа-канала (<a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a>), уыказывающие, как цвет <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">сочетается</a> с его фоном.</p> +<p>Тип <strong><code><color></code></strong> <a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/CSS_Types">data type</a> предоставляет цвет в цветовом спектре <a class="external" href="https://en.wikipedia.org/wiki/SRGB">sRGB</a>. В <code><color></code> может включать значения прозрачности Альфа-канала (<a class="external" href="https://en.wikipedia.org/wiki/Alpha_compositing">alpha-channel</a>), указывающие, как цвет <a href="https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending">сочетается</a> с его фоном.</p> <p>В <code><color></code> может быть определена любым из следующих способов can.</p> <ul> <li>Использование или подключенного свойства веденного в параметр (например, <code>blue</code> или <code>transparent</code>)</li> <li>Использование <a href="https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation">кубической системы координат RGB</a> (via the #-hexadecimal or the <code>rgb()</code> and <code>rgba()</code> functional notations)<img alt="Цветовая модель представлена виде куба" src="https://en.wikipedia.org/wiki/RGB_color_model#/media/File:RGB_color_solid_cube.png" style="height: 200px; width: 200px;"></li> - <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через фунциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li> + <li>Использование <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">цилиндрической системы координат HSL</a> (через функциональные обозначения <code>hsl()</code> и <code>hsla()</code>) </li> </ul> <div class="note"> -<p><strong>Заметка: </strong>В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к <a href="/en-US/docs/Web/HTML/Applying_color">элементам HTML с пмощью CSS</a>.</p> +<p><strong>Заметка: </strong>В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к <a href="/en-US/docs/Web/HTML/Applying_color">элементам HTML с помощью CSS</a>.</p> </div> -<h2 id="Cинтаксис">Cинтаксис </h2> +<h2 id="Синтаксис">Синтаксис </h2> <p>Для типа данных задается <code><color></code> с помощью одного из следующих параметров.</p> <div class="note"> -<p><strong>Заметка:</strong> значения <code><color></code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устроству. Это связоно с тем что большенство устройст не откалеброваны, а некторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p> +<p><strong>Заметка:</strong> значения <code><color></code> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили <a href="https://en.wikipedia.org/wiki/ICC_profile">устройств вывода</a>.</p> </div> <h3 id="Ключевые_цвета">Ключевые цвета</h3> @@ -1377,7 +1377,7 @@ hsla(240 100% 50% / 5%) <span style="background: hsla(240,100%,50%,0.05);"> <dd>Текст в windows. Следует использовать с цветом фона окна.</dd> </dl> -<h3 id="Расширеные_Цвета_Системы_Mozilla">Расширеные Цвета Системы Mozilla</h3> +<h3 id="Расширенные_Цвета_Системы_Mozilla">Расширенные Цвета Системы Mozilla</h3> <dl style=""> <dt>-moz-ButtonDefault</dt> diff --git a/files/ru/web/css/column-fill/index.html b/files/ru/web/css/column-fill/index.html index d08679f212..8216417d22 100644 --- a/files/ru/web/css/column-fill/index.html +++ b/files/ru/web/css/column-fill/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/column-fill --- <div>{{CSSRef("CSS Multi-columns")}}</div> -<p>Свойство <code>column-fill </code>применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства <code>column-fill</code> установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения <code>auto</code>, содержимое занимает столько прострванства сколько ему потребуется.</p> +<p>Свойство <code>column-fill </code>применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства <code>column-fill</code> установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения <code>auto</code>, содержимое занимает столько пространства сколько ему потребуется.</p> <p>{{cssinfo}}</p> diff --git a/files/ru/web/css/css_animations/index.html b/files/ru/web/css/css_animations/index.html index da1fc8dd8e..bdcd0b0c65 100644 --- a/files/ru/web/css/css_animations/index.html +++ b/files/ru/web/css/css_animations/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Animations --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p><strong>CSS Анимации</strong> - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (<em>keyframes</em>). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие аттрибуты.</p> +<p><strong>CSS Анимации</strong> - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (<em>keyframes</em>). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие атрибуты.</p> <h2 id="Reference">Reference</h2> 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 36aa62c5ac..2f25d7922e 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 @@ -88,7 +88,7 @@ original_slug: Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy <p>В элемент {{ HTMLElement("p") }} можно добавлять и другие пользовательские стили, чтобы как-то украсить его, однако здесь мы хотели продемонстрировать только эффект анимации.</p> -<p>Kлючевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> +<p>Ключевые кадры определяются с помощью правила {{ cssxref("@keyframes") }}. В данном случае мы имеем только два ключевых кадра. Первый при 0% анимации (<code>from</code>). Здесь мы придаем элементу левый отступ в 100% и ширину в 300% (в три раза больше ширины родительского элемента). Это становится причиной того, что при первом кадре анимации заголовок {{ HTMLElement("p") }} находится за пределами правого края окна браузера .</p> <p>Второй ключевой кадр (to) определяет конец анимации, т.е (100%). Левый отступ устанавливается равным 0, а ширина 100%. Все выглядит так, будто заголовок {{ HTMLElement("p") }} приплывает к левому краю окна браузера.</p> @@ -101,9 +101,9 @@ her in a languid, sleepy voice.</p> <p>{{EmbedLiveSample("Скольжение_текста","100%","250")}}</p> -<h3 id="Добавление_других_ключевыч_кадров">Добавление других ключевыч кадров</h3> +<h3 id="Добавление_других_ключевых_кадров">Добавление других ключевых кадров</h3> -<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p> +<p>Давайте добавим другие ключевые кадры в предыдущий пример. Скажем, мы хотим чтобы размер шрифта заголовка временно увеличивался по мере продвижения влево, а потом возвращался к первоначальному значению . Это легко реализовать с помощью следующего ключевого кадра:</p> <pre class="brush: css">75% { font-size: 300%; @@ -145,7 +145,7 @@ her in a languid, sleepy voice.</p> <p>(Обновите страницу, чтобы увидеть анимацию, или щелкните по кнопке CodePen, чтобы воспроизвести ее в окне CodePen)</p> -<p>{{ EmbedLiveSample('Добавление_других_ключевыч_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> +<p>{{ EmbedLiveSample('Добавление_других_ключевых_кадров', '100%', '250', '', 'Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy') }}</p> <h3 id="Настройка_повторения">Настройка повторения</h3> @@ -233,7 +233,7 @@ her in a languid, sleepy voice.</p> <h3 id="Установка_нескольких_значений_свойствам_анимации">Установка нескольких значений свойствам анимации </h3> -<p>CSS cвойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> +<p>CSS свойство анимации может иметь несколько значений, разделенных запятыми. Это используется, чтобы указать несколько значений анимации в одном правиле и установить разную продолжительность, число повторений и т.д., для различных анимаций. Рассмотрим несколько примеров, чтобы увидеть разницу.</p> <p>В первом примере у свойства имени анимации установлены три значения, у свойств продолжительности и количества повторений — по одному. В этом случае у всех трех анимаций одинаковая продолжительность и число повторений:</p> diff --git a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html index 9b133d5a73..0e5a5a7568 100644 --- a/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html +++ b/files/ru/web/css/css_basic_user_interface/using_url_values_for_the_cursor_property/index.html @@ -20,7 +20,7 @@ original_slug: >- <pre class="syntaxbox">cursor: [<url>,]* ключевое_слово</pre> -<p>Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определеннымы спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> +<p>Это означает, что устанавливать можно любое количество URL'ов (отделенных запятой), которые должны сопровождаться одним из ключевых слов, определенными спецификацией CSS, таких как <code>auto</code> или <code>pointer</code>.</p> <p>Например, такая последовательность значений допустима:</p> @@ -59,7 +59,7 @@ original_slug: >- <p><strong>Примечание:</strong> Начиная с Gecko 2.0 {{geckoRelease("2.0")}}, Gecko также поддерживает формат SVG в качестве изображения курсора. Тем не менее, SVG изображение должно содержать значения (кроме процентных значений) высоты и ширины на корневом <code>SVG</code> узле. JavaScript, CSS анимация и декларативный SMIL внутри SVG изображения игнорируются; например, вы не можете использовать SVG, чтобы создать анимированный курсор.</p> </div> -<p>В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться рамером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.</p> +<p>В Gecko (Firefox) максимальный размер курсора - 128×128 пикселей. Изображения большего размера игнорируются. Однако, вам следую ограничиться размером курсора в 32×32 пикселя для максимальной совместимости с операционными системами и платформами.</p> <p>(В следствие бага Gecko 1.9.2-1.9.2.6, Firefox 3.6-3.6.6 в Windows ограничивает размер в 32x32 пикселя. Это исправляется в более новых версиях.)</p> diff --git a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html index 0dc1ecbeca..3fe63cc24c 100644 --- a/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html +++ b/files/ru/web/css/css_box_alignment/box_alignment_in_flexbox/index.html @@ -25,7 +25,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <ul> <li>Главная ось = направление согласно атрибуту <code>flex-direction</code> = выравнивание через атрибут <code>justify-content</code></li> - <li>Поперечная ось = проходит поперек главной оси = выравниваие через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> + <li>Поперечная ось = проходит поперек главной оси = выравнивание через атрибут <code>align-content</code>, <code>align-self</code>/<code>align-items</code></li> </ul> <h3 id="Выравнивание_по_Главной_Оси">Выравнивание по Главной Оси</h3> @@ -52,7 +52,7 @@ translation_of: Web/CSS/CSS_Box_Alignment/Box_Alignment_in_Flexbox <h2 id="Выравнивание_и_свойство_margin_auto">Выравнивание и свойство margin: auto</h2> -<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значеним <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> +<p><span class="tlid-translation translation" lang="ru"><span title="">В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут <code>justify-self</code>. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации.</span> <span title="">В таком случае, можно использовать атрибут <code>margin</code> со значением <code>auto</code>.</span> <span title="">Атрибут с таким значением будет занимать все доступное пространство в своем измерении.</span> <span title="">Так работает центрирование блока со свойством <code>margin:auto</code>.</span> <span title="">Установив значение атрибутов <code>margin-left</code> и <code>margin-right</code> в значение <code>auto</code>, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.</span></span></p> <p><span class="tlid-translation translation" lang="ru"><span title="">Установив значение атрибута{{cssxref ("margin")}} в <code>auto</code> для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделенную навигацию.</span> <span title="">Это хорошо работает с разметкой flexbox и свойствами выравнивания.</span> <span title="">Как только для элемента со свойством <code>margin: auto</code> не остается свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объеме, пытаясь уместиться в доступное пространство.</span></span></p> diff --git a/files/ru/web/css/css_box_alignment/index.html b/files/ru/web/css/css_box_alignment/index.html index 90d8eea440..af449e8cff 100644 --- a/files/ru/web/css/css_box_alignment/index.html +++ b/files/ru/web/css/css_box_alignment/index.html @@ -131,7 +131,7 @@ translation_of: Web/CSS/CSS_Box_Alignment <h3 id="Distributed_alignment">Distributed alignment</h3> -<p><strong>Ключевые слова расспеределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> +<p><strong>Ключевые слова распределенного выравнивания</strong> используются с параметрами <code>align-content</code> и <code>justify-content</code>. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:</p> <ul> <li><code>stretch</code></li> diff --git a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html index ce82582529..cc6f77376b 100644 --- a/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html +++ b/files/ru/web/css/css_box_model/mastering_margin_collapsing/index.html @@ -19,16 +19,16 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <dt>Соседние элементы (siblings)</dt> <dd>Схлопываются отступы соседних элементов (за исключением случая, когда к последнему элементу применено свойство {{cssxref("clear")}}).</dd> <dt>Родительский и первый/последний дочерние элементы</dt> - <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.</dd> + <dd>Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block) или промежуток для отделения {{cssxref("margin-top")}} родительского элемента, от {{cssxref("margin-top")}} одного или нескольких его дочерних элементов/блоков или отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}}, {{cssxref("min-height")}} или {{cssxref("max-height")}} для отделения отступов {{cssxref("margin-bottom")}} родительского блока от {{cssxref("margin-bottom")}} отступов одного или нескольких его дочерних элементов/блоков, то внешние отступы схлопываются. Схлопнутые отступы заканчиваются за пределами родительского элемента.</dd> <dt>Пустые блоки</dt> - <dd>Если отстутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.</dd> + <dd>Если отсутствуют границы (border), внутренние отступы (padding), строчное содержимое (inline/inline-block), {{cssxref("height")}} или {{cssxref("min-height")}} для отделения {{cssxref("margin-top")}} верхнего отступа этого блока от его {{cssxref("margin-bottom")}} нижнего отступа, то верхние и нижние внешние отступы этого блока схлопываются.</dd> </dl> <p><u>На заметку:</u></p> <ul> <li>Более сложное схлопывание отступов (более, чем двух) происходит, когда описанные случаи сочетаются.</li> - <li>Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последниего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.</li> + <li>Эти правила применяются даже к отступам, равным 0, поэтому отступ первого/последнего дочернего элемента заканчивается за пределами его родителя (согласно правилу выше) независимо от того, равен ли отступ родителя нулю.</li> <li>При использовании отрицательных отступов, размер схлопнутого отступа вычисляется, как сумма наибольшего положительного и наименьшего отрицательного (наибольшего по модулю) отступа.</li> <li>Если все отступы отрицательные, размер схлопнутого отступа равен наименьшему (наибольшему по модулю) отступу. Это относится как к вложенным элементам, так и к соседним.</li> <li>Внешние отступы <a href="/en-US/docs/Web/CSS/float">плавающих</a> и <a href="/en-US/docs/Web/CSS/position">абсолютно позиционируемых</a> элементов никогда не схлопываются.</li> diff --git a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html index f9fb1c78d5..7bab55db18 100644 --- a/files/ru/web/css/css_columns/using_multi-column_layouts/index.html +++ b/files/ru/web/css/css_columns/using_multi-column_layouts/index.html @@ -48,7 +48,7 @@ qui officia deserunt mollit anim id est laborum</div> <p>В многоколончатом блоке, содержимое автоматически перетекает из одной колонки в следующую, как это необходимо. Вся HTML, CSS и DOM функциональность поддерживается внутри колонок, как например редактирование и печать.</p> -<h3 id="Краткая_запись_columns"><code>К</code>раткая запись columns</h3> +<h3 id="Ккраткая_запись_columns"><code>К</code>краткая запись columns</h3> <p>В большинстве случаев веб-разработчики используют одно из двух свойств CSS: {{ cssxref("column-count") }} или {{ cssxref("column-width") }}. Так как значения для этих свойств не пересекаются, то часто удобно использовать короткую запись {{ cssxref("columns") }}. Пример:</p> diff --git a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html index e28dc11693..3f405f926f 100644 --- a/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html +++ b/files/ru/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container/index.html @@ -119,7 +119,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <h2 id="Выравнивание_содержимого_по_главной_оси">Выравнивание содержимого по главной оси</h2> -<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обсуловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p> +<p>Теперь, когда мы увидели, как работает выравнивание по перекрёстной оси, можно посмотреть на главную ось. Здесь нам доступно только одно свойство — <code>justify-content</code>. Это обусловлено тем, что с элементами на главной оси мы работаем только как с группой. Используя свойство <code>justify-content</code>, мы контролируем, что происходит со свободным пространством на главной оси, и требуется ли нам больше пространства, чем нужно для отображения наших элементов.</p> <p>В нашем первом примере с использованием свойства <code>display: flex</code>, примененным к контейнеру, элементы отображаются как строка и выстраиваются в начале блока. Это обусловлено тем, что свойство <code>justify-content</code> имеет начальное значение <code>flex-start</code>. Все свободное место располагается в конце контейнера.</p> @@ -167,7 +167,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p>{{EmbedGHLiveSample("css-examples/flexbox/alignment/justify-content-reverse.html", '100%', 440)}} </p> -<p>Может показаться немного запутанным, но главное правило, которое необходимо запомить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p> +<p>Может показаться немного запутанным, но главное правило, которое необходимо запомнить – до тех пор, пока вы не измените свойство <code>flex-direction</code>, элементы контейнера выстраиваются в режиме записи вашего языка (<code>ltr</code> или <code>rtl</code>). </p> <p><img alt="Diagram showing start on the left and end on the right." src="https://mdn.mozillademos.org/files/15634/align8.png" style="display: block; height: 152px; margin: 0px auto; width: 631px;"></p> @@ -191,7 +191,7 @@ original_slug: Web/CSS/CSS_Flexible_Box_Layout/Выравнивание_элем <p><img alt="Five items, in two groups. Three on the left and two on the right." src="https://mdn.mozillademos.org/files/15633/align7.png" style="display: block; height: 84px; margin: 0px auto; width: 645px;"></p> -<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом cработает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p> +<p>Вместо этого мы можем выбрать четвёртый элемент (<em>d</em>) и отделить его от первых трёх, задав ему значение <code>auto</code> для <code>margin-left</code>. Авто-margin заполнит всё доступное свободное место по своей оси. Тем же образом работает <code>margin-right</code>. Оба свойства со значениями <code>auto</code> отцентрируют блок, так как каждый из отступов будет пытаться занять максимум пространства.</p> <p>В интерактивном примере ниже у нас имеется простой ряд из флекс-элементов и класс <code>push</code> с заданным <code>margin-left: auto</code>. Вы можете, например, попробовать удалить это значение или добавить класс другому элементу, чтобы увидеть, как работает этот метод. </p> diff --git a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html index 8a4e3ce28b..9c407f61fa 100644 --- a/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html +++ b/files/ru/web/css/css_flexible_box_layout/backwards_compatibility_of_flexbox/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Backwards_Compatibility_of_Flexb <p>Как и все спецификации CSS, flexbox претерпела огромное количество изменений, прежде чем стать Кандидатом в рекомендации W3C. У спецификации в этом статусе не должно быть значительных изменений, однако с предыдущими итерациями все было иначе.</p> -<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы всеравно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> +<p>Flexbox был реализован экспериментальным путем в нескольких браузерах. В то время метод создания экспериментальных реализаций подразумевал использование вендорных префиксов. Идея этих префиксов была в том, чтобы позволить инженерам браузеров и веб-разработчикам исследовать и протестировать новшества спецификации без конфликтов с другими реализациями. Идея заключалась в том, чтобы не использовать экспериментальные реализации на продакшене. Однако, в конечном счете префиксы все равно попали в продакшн, и изменения в экспериментальной спецификации вынудили людей обновлять сайты, чтобы этой самой спецификации соответствовать.</p> <p><a href="https://www.w3.org/TR/2009/WD-css3-flexbox-20090723/">В 2009</a> спецификация выглядела совсем по-другому. Чтобы создать flex-контейнер, вам нужно было использовать <code>display: box</code> и несколько <code>box-*</code> свойств, которые делали то, что сегодня вы понимаете под flexbox.</p> 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 347d429eb4..23f034fb6f 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 @@ -83,9 +83,9 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox <h3 id="Изменение_flex-direction">Изменение flex-direction</h3> -<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображаения элементов вдоль строки, однако начало и конец строки поменяются местами.</p> +<p>Добавление свойства {{cssxref ("flex-direction")}} в контейнер позволяет нам изменять направление, в котором отображаются наши элементы flex. Установка <code>flex-direction: row-reverse</code> сохранит порядок отображения элементов вдоль строки, однако начало и конец строки поменяются местами.</p> -<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец стобца поменяются местами.</p> +<p>Если изменить значение свойства <code>flex-direction</code> на <code>column</code>, главная ось изменится, и наши элементы будут отображаются в столбец. При установке параметра <code>column-reverse</code>, начало и конец столбца поменяются местами.</p> <p>В приведенном ниже примере значение свойства <code>flex-direction</code> установлено как <code>row-reverse</code>. Попробуйте другие значения — <code>row</code>, <code>column</code> и<code>column-reverse</code>, чтобы посмотреть как изменятся элементы контейнера.</p> diff --git a/files/ru/web/css/css_flexible_box_layout/index.html b/files/ru/web/css/css_flexible_box_layout/index.html index d271a2bd8b..0e1d47bc0b 100644 --- a/files/ru/web/css/css_flexible_box_layout/index.html +++ b/files/ru/web/css/css_flexible_box_layout/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout --- <p>{{CSSRef}}</p> -<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложеных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p> +<p><strong>Способ CSS раскладки Flexible Box</strong> (CSS Flexible Box Layout или <strong>Flexbox</strong>) — это способ CSS раскладки, означающий <a href="/ru/docs/Web/CSS/CSS_Box_Model">блочную модель CSS</a>, оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложенных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.</p> <h2 id="Базовый_пример">Базовый пример</h2> 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 0df3168e3a..6a31a4a6ea 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 @@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Flexible_Box_Layout/Mastering_Wrapping_of_Flex_Items <p>В технологии флексбоксов нет методов, которые позволили бы сказать элементам в одной строке выстроиться так же, как в строке выше — каждая флекс-строка ведёт себя как новый флекс-контейнер. Это так же касается распределения пространства по главной оси. Если есть только один элемент и ему разрешено расти, то он будет расти и заполнять главную ось направления, так же, как будто бы он был единственным элементов в контейнере.</p> -<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимумальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми стоблцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p> +<p>Если вы хотите макет в двух измерениях, то вы, вероятно, хотите макет сетки - Grid Layout. Мы можем сравнить наш пример переноса строк выше с версией, сделанной на технологии CSS Grid, чтобы увидеть разницу. Следующий живой пример использует технологию CSS Grid Layout для создания макета с несколькими колонками, каждая из которых имеет установленный минимальный размер в 160 px и соответственно распределяя дополнительное пространство между всеми столбцами. Однако в этом случае элементы остаются в своей сетке и не растягиваются, если их в последнем ряду меньше.</p> <p>{{EmbedGHLiveSample("css-examples/flexbox/wrapping/grid-example.html", '100%', 700)}}</p> diff --git a/files/ru/web/css/css_flow_layout/index.html b/files/ru/web/css/css_flow_layout/index.html index 99afb866d3..80fddc9dab 100644 --- a/files/ru/web/css/css_flow_layout/index.html +++ b/files/ru/web/css/css_flow_layout/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <p class="summary">По сути поток представляется собой набор сущностей, которые работают вместе и знают друг о друге. Когда некоторая сущность <em>вынимается из потока (out of flow)</em>, то она работает независимо.</p> -<p class="summary">В нормальном потоке <strong>строчные (inline)</strong> элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>) документа. <strong>Блочные (block)</strong> элементы отображаются один за другим, также как параграфы в соответсвии с режимом письма документа. Поэтому в анлгийском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.</p> +<p class="summary">В нормальном потоке <strong>строчные (inline)</strong> элементы отображаются в направлении строки (inline direction), то есть в том же направлении, как идут слова в предложении в соответствии с режимом письма (<a href="/en-US/docs/Web/CSS/CSS_Writing_Modes">writing mode</a>) документа. <strong>Блочные (block)</strong> элементы отображаются один за другим, также как параграфы в соответствии с режимом письма документа. Поэтому в английском языке строчные элементы отображаются один за другим, начиная слева, а блочные элементы выкладываются на странице сверху вниз.</p> <h2 id="Пример">Пример</h2> @@ -39,7 +39,7 @@ translation_of: Web/CSS/CSS_Flow_Layout <h2 id="Ссылки">Ссылки</h2> -<h3 id="Записи_глосария">Записи глосария</h3> +<h3 id="Записи_глоссария">Записи глоссария</h3> <ul> <li>{{Glossary("Block/CSS", "Block (CSS)")}}</li> diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html index 4291fd6253..62ea79ece6 100644 --- a/files/ru/web/css/css_fonts/index.html +++ b/files/ru/web/css/css_fonts/index.html @@ -33,7 +33,7 @@ translation_of: Web/CSS/CSS_Fonts <h2 id="Различные_примеры_шрифтов">Различные примеры шрифтов</h2> -<p>Вы можете найти множетсво вариантов шрифтов на <a href="https://v-fonts.com/">v-fonts.com</a> и <a href="https://www.axis-praxis.org/">axis-praxis.org</a>; так же смотрите наше руководство <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> для большей информации по использованию.</p> +<p>Вы можете найти множество вариантов шрифтов на <a href="https://v-fonts.com/">v-fonts.com</a> и <a href="https://www.axis-praxis.org/">axis-praxis.org</a>; так же смотрите наше руководство <a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts</a> для большей информации по использованию.</p> <h2 id="Отсылки">Отсылки</h2> @@ -92,7 +92,7 @@ translation_of: Web/CSS/CSS_Fonts <dt><a href="/en-US/docs/Learn/CSS/Styling_text/Fundamentals">Fundamental text and font styling</a></dt> <dd>В этой обучающей статье для новичков мы детально описываем основы стилизации текста/шрифта, включая определение жирности начертания, вида шрифта и стилей, рассматриваем сокращённую запись свойства font, декорации текста и другие эффекты, а так же межстрочные и межбуквенные интервалы.</dd> <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/OpenType_fonts_guide">OpenType font features guide</a></dt> - <dd>Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вэбе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.</dd> + <dd>Особенности шрифтов или их варианты ссылаются на различные стили символов или букв, содержащиеся в OpenType. Руководство описывает такие вещи как лигатура (специальные символы объединяющие буквы вроде 'fi' или 'ffl'), кернинг (то, как свободное место распределяется между различными символами) и другое. Всё перечисленное относится к особенностям OpenType и позволяет использовать в вебе специальные свойства и свойства контроля нижнего уровня {{cssxref("font-feature-settings")}}. В статье есть всё, что вам нужно знать об особенностях OpenType шрифтов в CSS.</dd> <dt><a href="/en-US/docs/Web/CSS/CSS_Fonts/Variable_Fonts_Guide">Variable fonts guide</a></dt> <dd><strong>Variable fonts</strong> are an evolution of the OpenType font specification that enables many different variations of a typeface to be incorporated into a single file, rather than having a separate font file for every width, weight, or style. This article will give you all you need to know to get you started using variable fonts.</dd> </dl> diff --git a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html index cc8f7b4f75..8ea1b8d352 100644 --- a/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/box_alignment_in_css_grid_layout/index.html @@ -640,7 +640,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <p>Во всех этих примерах я работал на английском языке, который является языком слева направо. Это означает, что наши стартовые линии находятся сверху и слева от нашей сетки, когда мы думаем в физических направлениях.</p> -<p>CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справо налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для <code>justify-content: start</code> будет состоять в том, что треки сетки начинаются с правой стороны сетки.</p> +<p>CSS Grid Layout и спецификация Box Alignment предназначены для работы с режимами записи в CSS. Это означает, что если вы работаете с языком справа налево, например на арабском языке, начало сетки будет верхним и правым, поэтому значение по умолчанию для <code>justify-content: start</code> будет состоять в том, что треки сетки начинаются с правой стороны сетки.</p> <p>Однако, если вы устанавливаете автоматические поля, используя <code>margin-right</code> или <code>margin-left</code>, или абсолютно позиционирующий элемент, используя <code>top</code>, <code>right</code>, <code>bottom</code> and <code>left</code> смещения, вы не будете соблюдать режимы записи. В следующем руководстве мы рассмотрим это взаимодействие между компоновкой сетки CSS, выравниванием ящиков и режимами записи. Это будет важно понимать, если вы разрабатываете сайты, которые затем отображаются на нескольких языках, или если вы хотите смешивать языки или режимы записи в дизайне.</p> 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 87da484318..19795f3d19 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/Грид-области --- -<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именнованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> +<p>В <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">предыдущем обзоре</a> мы рассмотрели грид-линии и то, как с их помощью размещать элементы в гридах. Когда Вы работаете с CSS Grid Layout, у Вас всегда есть грид-линии, поэтому они - быстрый, прямой и надежный способ расположить элементы. Как бы то ни было, существует альтернативный метод, и этот метод можно использовать как в одиночку, так и в сочетании с расположением элементов по грид-линиям. В этом методе элементы располагаются с помощью именованных, заранее определенных грид-областей. Давайте рассмотрим, как он работает, и Вы скоро поймете, почему его называют методом ascii-искусства в концепции макетов на гридах!</p> <h2 id="Имя_для_грид-области">Имя для грид-области</h2> @@ -30,7 +30,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p><img alt="An image showing a simple two column layout with header and footer" src="https://mdn.mozillademos.org/files/14669/4_Layout.png" style="height: 397px; width: 900px;"></p> -<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именнованные области, которые мы можем в нем использовать.</p> +<p>С помощью свойства {{cssxref("grid-area")}} мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.</p> <div id="Grid_Area_1"> <pre class="brush: css">.header { @@ -223,7 +223,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <h2 id="Переопределение_грида_с_медиа-запросами">Переопределение грида с медиа-запросами</h2> -<p>Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновеременно.</p> +<p>Поскольку наш макет теперь содержится в одной части CSS, вносить изменения для различных контрольных точек (breakpoints) становится крайне легко. Сделать это можно либо переопределив сам грид, либо положение элементов на гриде, либо и то, и другое одновременно.</p> <p>При этом определяйте имена для ваших грид-областей за пределами медиа-запросов. В таком случае, область основного содержимого (content) всегда будет называться <code>main</code> независимо от того, где она находится на сетке.</p> @@ -409,7 +409,7 @@ original_slug: Web/CSS/CSS_Grid_Layout/Грид-области <p>Они могут быстро стать трудными для чтения для других разработчиков или даже для вашего будущего. Однако они являются частью спецификации и, вероятно, вы столкнетесь с ними в примерах или в использовании другими разработчиками, даже если вы решите не использовать их.</p> -<p>Прежде чем использовать какиу-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p> +<p>Прежде чем использовать какие-либо сокращения (shorthand), стоит помнить, что shorthand не только позволяют устанавливать множество свойств за один раз, но также действуют, чтобы <strong>сбросить объекты</strong> до их начальных значений, которых вы не используете, или не можете установить в сокращении. Поэтому, если вы используете сокращения, помните, что оно может сбросить все, что вы применили в другом месте.</p> <p>Два сокращения (shorthand) для контейнера сетки - это Explicit Grid Shorthand <code>grid-template</code> и Grid Definition Shorthand <code>grid</code>.</p> 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 e20cbc76c8..08e932f0b0 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 @@ -272,7 +272,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Layout_using_Named_Grid_Lines } </pre> -<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расоложен начиная с седьмой линии и займет три линии.</p> +<p>Вы можете использовать ключевое слово <code>span</code>. Следующий элемент будет расположен начиная с седьмой линии и займет три линии.</p> <pre class="brush: css">.item2 { grid-column: col-start 7 / span 3; 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 be2ecaee2e..e2086dee05 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 @@ -19,7 +19,7 @@ original_slug: >- <p>В качестве крайне простого примера давайте возьмем грид с тремя треками-колонками и тремя треками-строками. Такой грид дает нам по 4 линии для каждого направления.</p> -<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидете, как грид инициирует колонки и строки.</p> +<p>Внутри нашего грид-контейнера у нас есть четыре дочерних элемента. Если мы не размещаем их явным образом, эти элементы будут расположены в гриде в соответствии с правилами авторазмещения, то есть, по одному элементу - в каждой из четырех первых ячеек. Если Вы воспользуетесь <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Firefox Grid Highlighter</a> , то увидите, как грид инициирует колонки и строки.</p> <p><img alt="Our Grid highlighted in DevTools" src="https://mdn.mozillademos.org/files/14663/3_hilighted_grid.png" style="height: 296px; width: 900px;"></p> @@ -244,7 +244,7 @@ original_slug: >- <p>{{ EmbedLiveSample('End_Lines', '300', '330') }}</p> </div> -<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слэша и без второго значения:</p> +<p>Поэтому, если мы хотим, чтобы элементы занимали только один трек, наша сокращенная запись будет выглядеть вот так, без слеша и без второго значения:</p> <div id="New_Shorthand"> <div class="hidden"> @@ -366,7 +366,7 @@ original_slug: >- <p>Мы работаем с русским, языком с написанием слева направо. Начало нашего блока (block-start) - верхняя строчная линия грид-контейнера, конец блока (block-end) - последняя строчная линия контейнера. Начало строки (inline-start) - самая левая колоночная линия, поскольку начало строки - это всегда точка, с которой начинается написание текста в заданном режиме написания. Конец строки (inline-end) - последняя колоночная линия грида.</p> -<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания вебсайты - многонаправленные структуры.</p> +<p>Когда мы задаем нашу грид-область с помощью свойства <code>grid-area</code> , мы сначала определяем обе начальные линии <code>block-start</code> и <code>inline-start</code>, а затем обе конечные линии <code>block-end</code> и <code>inline-end</code>. Поскольку мы давно работаем с физическими свойствами top, right, bottom и left, поначалу это кажется непривычным, но вполне осмысленно, если осознать, что относительно режима написания веб-сайты - многонаправленные структуры.</p> <h2 id="Считая_с_конца">Считая с конца</h2> @@ -572,7 +572,7 @@ original_slug: >- <p>{{ EmbedLiveSample('Using_the_span_keyword', '300', '330') }}</p> -<p>Ключево слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> +<p>Ключевое слово <code>span</code> также можно использовать в качестве значения <code>grid-row-start</code>/<code>grid-row-end</code> и<code>grid-column-start/grid-column-end</code>. Два примера ниже создают одну и ту же грид-область. В первом примере мы задаем начальную строчную линию, а после говорим свойству, отвечающему за конечную линию: эй, мы хотим занять под этот элемент три линии. В итоге, грид-область начинается с первой линии и занимает пространство до 4-ой.</p> <pre class="notranslate">.box1 { grid-column-start: 1; 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 ad8e4e9186..7785b66392 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 @@ -116,7 +116,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>Вы можете видеть, как макет принимает форму в значении {{cssxref("grid-template-areas")}}. Заголовок охватывает две дорожки столбцов, как и навигационная система. В треке третьего ряда у нас есть боковая панель рядом с содержимым. В четвертой строке я решил разместить свой рекламный контент – так он появляется под боковой панелью, а затем футер, рядом с ним под контентом. Я использую flexbox в навигации, чтобы отобразить его в разнесенном ряду.</p> -<p>Тепреь я могу добавить конечные точки в наш 3-х колоночный макет.</p> +<p>Теперь я могу добавить конечные точки в наш 3-х колоночный макет.</p> <pre class="brush: css">@media (min-width: 700px) { .wrapper { @@ -140,7 +140,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Realizing_common_layouts_using_CSS_Grid_ <p>{{ EmbedLiveSample('layout_1', '800', '500') }}</p> </div> -<p>Это простой пример, но он демонстрирует, как мы можем использовать grid layout для перестройки нашего макета. В частности, я изменяю расположение рекламного блока, как заложено в настройках столбцов. Этот метод очень полезен на этапе прототипирования, он легко позволяет эксперементировать с расположением элементов. Вы всегда можете использовать сетку таким образом для прототипирования, даже несмотря на особенности отражения в различных браузерах, которые показывают ваш сайт.</p> +<p>Это простой пример, но он демонстрирует, как мы можем использовать grid layout для перестройки нашего макета. В частности, я изменяю расположение рекламного блока, как заложено в настройках столбцов. Этот метод очень полезен на этапе прототипирования, он легко позволяет экспериментировать с расположением элементов. Вы всегда можете использовать сетку таким образом для прототипирования, даже несмотря на особенности отражения в различных браузерах, которые показывают ваш сайт.</p> <h2 id="Гибкий_12-колоночный_макет."><font face="Liberation Sans, sans-serif"><font size="4">Гибкий 12-колоночный макет.</font></font></h2> diff --git a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html index e49f1183b8..9ecddf7ce9 100644 --- a/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/relationship_of_grid_layout/index.html @@ -61,9 +61,9 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>{{ EmbedLiveSample('onedtwod', '500', '230') }}</p> -<p>На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выравнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках <strong>всей </strong>строки. </p> +<p>На картинке вы видите, что два элемента перешли на новую строку. Эти элементы поделили свободное пространство между собой, а не выровнялись по элементам над ними. Происходит это потому, что каждая новая строка (или колонка, если мы работаем с колонками) становится новым flex-контейнером. А во flex-контейнере распределение свободного пространства действует в рамках <strong>всей </strong>строки. </p> -<p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выравняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p> +<p>Общий вопрос заключается в том, как заставить наши перебежавшие элементы выровняться по элементам сверху. Как раз в этом случае и нужен метод размещения элементов в двумерной системе: требуется выравнивание и по строке, и по колонке, а для этого на помощь спешит Grid.</p> <h3 id="Тот_же_макет_но_с_CSS_гридами">Тот же макет, но с CSS гридами</h3> @@ -368,7 +368,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Вы видите, что наш элемент занимает область от колоночной грид-линии 2 до колоночной грид-линии 4 и начинается после строчной линии 1. С помощью свойств left и top мы сдвигаем его относительно этой области. В то же время, он изымается из потока так же, как и любой другой элемент с абсолютным позиционированием, поэтому правила авторазмещения теперь помещают другие элементы на его место. Абсолютное позиционирование нашего элемент также не приводит к появлению новой строки.</p> -<p>Попробуйте удалить<code>position:</code> <code>absolute</code> из правил для <code>.box3</code> , и увидете, как он размещался бы без абсолютного позиционирования.</p> +<p>Попробуйте удалить<code>position:</code> <code>absolute</code> из правил для <code>.box3</code> , и увидите, как он размещался бы без абсолютного позиционирования.</p> <h3 id="Грид-контейнер_в_качестве_родительского_элемента">Грид-контейнер в качестве родительского элемента</h3> diff --git a/files/ru/web/css/css_grid_layout/subgrid/index.html b/files/ru/web/css/css_grid_layout/subgrid/index.html index f3e0b898d1..d0d92dae7d 100644 --- a/files/ru/web/css/css_grid_layout/subgrid/index.html +++ b/files/ru/web/css/css_grid_layout/subgrid/index.html @@ -109,7 +109,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Subgrid <tr> <td>{{SpecName("CSS Grid 2")}}</td> <td>{{Spec2("CSS Grid 2")}}</td> - <td>Изначальнео определение <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td> + <td>Изначально определение <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout#Subgrid">subgrids</a>.</td> </tr> </tbody> </table> diff --git a/files/ru/web/css/css_images/using_css_gradients/index.html b/files/ru/web/css/css_images/using_css_gradients/index.html index 994886ec7a..5f029e06fa 100644 --- a/files/ru/web/css/css_images/using_css_gradients/index.html +++ b/files/ru/web/css/css_images/using_css_gradients/index.html @@ -240,7 +240,7 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients <p>{{ EmbedLiveSample('Создание_цветных_линий_и_полосок', 120, 120) }}</p> -<p>В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градинета, и так далее.</p> +<p>В первом примере выше лаймовый цвет идёт от отметки 0%, далее, как указано, до отметки 20%, сделает переход от лаймового до красного через 10% ширины градиента, достигнет сплошного красного на отметке 30%, и останется таким до 45% градиента, где он потускнеет до голубого, оставаясь таким ещё 15% градиента, и так далее.</p> <p>Во втором примере каждая вторая точка остановки для каждого цвета находится на той же позиции, что и первая точка остановки соседнего цвета, создавая полосатый эффект.</p> @@ -250,7 +250,7 @@ translation_of: Web/CSS/CSS_Images/Using_CSS_gradients <div> <h3 id="Управление_переходом_градиента">Управление переходом градиента</h3> -<p>По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на растоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:</p> +<p>По умолчанию градиент плавно переходит между цветами двух соседних точек остановки, а средняя точка между этими двумя точками остановки является средним значением цветового перехода. Вы можете контролировать интерполяцию или переход между двумя точками остановки добавлением его расположения в цветовой подсказке. В этом примере цвет достигает средней точки перехода от лаймового до голубого на расстоянии 20% градиента вместо стандартных 50%. Во втором примере нет такой подсказки, чтобы подчеркнуть отличие, получаемое при её использовании:</p> <div class="hidden"> <pre class="brush: html"><div class="colorhint-gradient"></div> <div class="regular-progression"></div> diff --git a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html index 6f2cf1d36b..cae93917f6 100644 --- a/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html +++ b/files/ru/web/css/css_lists_and_counters/using_css_counters/index.html @@ -41,7 +41,7 @@ h3::before { <h2 id="Вложенные_счетчики">Вложенные счетчики</h2> -<p>CSS счетчики могут быть очень полезны для создания нумерованых списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p> +<p>CSS счетчики могут быть очень полезны для создания нумерованных списков, потому что новая сущность CSS счетчика автоматически создается в дочерних элементах. Используя функцию <code>counters(), можно вставить строку между разными уровнями вложенных счетчиков. Пример:</code></p> <pre class="brush: css">ol { counter-reset: section; /*Создает новый счетчик для каждого @@ -60,7 +60,7 @@ li::before { } </pre> -<p>Обьединим с данным HTML:</p> +<p>Объединим с данным HTML:</p> <pre class="brush: html"><ol> <li>item</li> <!-- 1 --> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html index 4f041d515f..1b024aaca9 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/adding_z-index/index.html @@ -8,7 +8,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Adding_z-index <p>The first part of this article, <a href="/en/CSS/Understanding_z-index/Stacking_without_z-index" title="en/CSS/Understanding_z-index/Stacking_without_z-index">Stacking without the z-index property</a>, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the {{cssxref("z-index")}} property on a <a href="/en-US/docs/Web/CSS/position#Types_of_positioning">positioned</a> element.</p> -<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию єлемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственое порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> +<p>Свойство <code>z-index</code> может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию єлемента вдоль оси z. Если вы не знакомы с<strong> </strong>осью<strong> </strong>z, представьте себе страницу как стопку слоев, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.</p> <ul> <li>bottom layer<em> (farthest from the observer)</em></li> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/index.html index 8d5d965a23..d2185a90e3 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/index.html @@ -16,14 +16,14 @@ original_slug: Web/Guide/CSS/Understanding_z_index <p>Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.{{cssxref("z-index")}} атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).</p> <blockquote> -<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и распологались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> +<p><em>В CSS 2.1, позиция каждого блока была в трех измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга. </em></p> </blockquote> <p>(from <a class="external" href="http://www.w3.org/TR/CSS21/visuren.html#z-index">CSS 2.1 Section 9.9.1 - Layered presentation</a>)</p> <p>Это означает, что правила стиля CSS позволяют вам позиционировать блоки на слоях в дополнение к обычному слою рендеринга (слой 0). Положение Z каждого слоя выражается как целое число, представляющее порядок наложения для рендеринга. Большие числа означают ближе к наблюдателю. Положение Z можно контролировать с помощью свойства CSS z-index.</p> -<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это обьясняется целым комплексом правил "укладки" элементов. Фактически в спецификации <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно обьясняющий эти правила.</p> +<p>Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это объясняется целым комплексом правил "укладки" элементов. Фактически в спецификации <a class="external" href="http://www.w3.org/TR/CSS21/zindex.html">CSS-2.1 Appendix E</a> (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно объясняющий эти правила.</p> <p>Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.</p> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html index 7ab14098a2..e7eac00f5a 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/stacking_without_z-index/index.html @@ -11,7 +11,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index <h3 id="Наложения_без_Z-индекса">Наложения без Z-индекса</h3> -<p>Когда элементы не имеют z-индека, они накладываються в таком порядке(снизу вверх):</p> +<p>Когда элементы не имеют z-индекса, они накладываются в таком порядке(снизу вверх):</p> <p>1. Фон и границы корневого элемента.</p> @@ -19,7 +19,7 @@ original_slug: Web/Guide/CSS/Understanding_z_index/Stacking_without_z-index <p>3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).</p> -<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина и позиция таким образом, чтобы продемонстировать правила наложения.</p> +<p>В следующем примере, абсолютно и относительно спозиционированным блокам определена величина и позиция таким образом, чтобы продемонстрировать правила наложения.</p> <div class="note"> <p><strong>Заметки:</strong></p> diff --git a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html index 8a76b44318..5a3ae04036 100644 --- a/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html +++ b/files/ru/web/css/css_positioning/understanding_z_index/the_stacking_context/index.html @@ -26,7 +26,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <li>элементы с {{cssxref("isolation")}} установленным в "isolate",</li> <li><code>position: fixed</code></li> <li>если мы указываем элементу атрибут <code>{{cssxref("will-change")}}</code> при этом не обязательно присваивать ему значения (См. <a href="http://dev.opera.com/articles/css-will-change-property/">this post</a>)</li> - <li>элементы с {{cssxref("-webkit-overflow-scrolling")}} установленым в "touch"</li> + <li>элементы с {{cssxref("-webkit-overflow-scrolling")}} установленным в "touch"</li> </ul> <p>Внутри контекста наложения дочерние элементы расположены в соответствии с правилами, описанными ранее. Важно заметить, что значения свойства z-index для дочерних элементов формирующих контекст наложения, будут учитываться только в рамках родительского элемента. Контекст наложения обрабатываются атомарно, как единое целое в контексте наложения родителя.</p> @@ -69,7 +69,7 @@ translation_of: Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_conte <p><strong>Notes:</strong></p> <ul> - <li>DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контекта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому, DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).</li> + <li>DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому, DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).</li> <li>По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).</li> <li>У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.</li> <li>An easy way to figure out the <em>rendering order</em> of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order): diff --git a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html index 1132200f6e..a6ab4ae735 100644 --- a/files/ru/web/css/css_scroll_snap/basic_concepts/index.html +++ b/files/ru/web/css/css_scroll_snap/basic_concepts/index.html @@ -19,9 +19,9 @@ translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts <p>Свойство {{CSSxRef("scroll-snap-type")}} необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть <code>x</code>, <code>y</code>, или соответствующие логические <code>block</code> или <code>inline</code>. Также можно использовать ключевое слово <code>both</code>, чтобы привязка работала в обоих направлениях.</p> -<p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может прозойти , но не обязательно.</p> +<p>Также можно передавать ключевые слова <code>mandatory</code>, или <code>proximity</code>. Ключевое слово <code>mandatory</code> определяет обязательное смещение прокрутки браузера к ближайшей точке привязки. Ключевое слово <code>proximity</code> означает, что привязка может произойти , но не обязательно.</p> -<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое повысоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к пределённому месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> +<p>Использование <code>mandatory</code> делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определенному месту на странице странице. Следовательно, применение <code>mandatory</code> должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.</p> <p>При значении <code>proximity</code> привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с <code>mandatory</code> на <code>proximity</code>, чтобы увидеть, как это влияет на работу прокрутки.</p> @@ -47,7 +47,7 @@ translation_of: Web/CSS/CSS_Scroll_Snap/Basic_concepts <h2 id="Внешние_отступы_дочерних_элементов">Внешние отступы дочерних элементов</h2> -<p>Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний оступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством <code>scroll-padding</code> для родителя. Опробуйте его в примере ниже</p> +<p>Свойство {{CSSxRef("scroll-margin")}} может быть задано для дочерних элементов и определяет, по сути, внешний отступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством <code>scroll-padding</code> для родителя. Опробуйте его в примере ниже</p> <p>{{EmbedGHLiveSample("css-examples/scroll-snap/scroll-margin.html", '100%', 700)}}</p> diff --git a/files/ru/web/css/css_selectors/index.html b/files/ru/web/css/css_selectors/index.html index f3c8f7dfa7..039e006a62 100644 --- a/files/ru/web/css/css_selectors/index.html +++ b/files/ru/web/css/css_selectors/index.html @@ -102,7 +102,7 @@ original_slug: Web/CSS/CSS_Селекторы <td>{{SpecName('CSS3 Selectors')}}</td> <td>{{Spec2('CSS3 Selectors')}}</td> <td>Добавлен комбинатор <code>~</code> и древовидные структурные псевдоклассы.<br> - Сделаны псевдоэлементы, использующие префик <code>::</code> двойное двоеточие. Селекторы дополнительных атрибутов.</td> + Сделаны псевдоэлементы, использующие префикс <code>::</code> двойное двоеточие. Селекторы дополнительных атрибутов.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'selector.html')}}</td> diff --git a/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html index 456e350fad..7c112e8d03 100644 --- a/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html +++ b/files/ru/web/css/css_selectors/using_the__colon_target_pseudo-class_in_selectors/index.html @@ -10,9 +10,9 @@ original_slug: Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_ <h2 id="Picking_a_Target" name="Picking_a_Target">Выбор целевых элементов</h2> -<p>Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> содержит идентификатор фрагмента <code>#example</code>. В HTML, идентификаторы определяются значениями атрибутов <code>id</code> или <code>name</code>, т.к. эти аттрибуты разделяют одно пространство имён. Таким образом, в вышеприведённом примере URL указывает на первый элемент "example" в документе.</p> +<p>Псевдокласс {{cssxref(":target")}} используется для стилизации целевого элемента URL, содержащего идентификатор фрагмента. Например, URL <code><span class="nowiki">http://developer.mozilla.org/en/docs/Using_the_:target_selector#example</span></code> содержит идентификатор фрагмента <code>#example</code>. В HTML, идентификаторы определяются значениями атрибутов <code>id</code> или <code>name</code>, т.к. эти атрибуты разделяют одно пространство имён. Таким образом, в вышеприведённом примере URL указывает на первый элемент "example" в документе.</p> -<p>Пердположим, вы хотите стилизовать любой элемент <code>h2</code>, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:</p> +<p>Предположим, вы хотите стилизовать любой элемент <code>h2</code>, который является целью URL, но не хотите, чтобы другие элементы получили стиль цели. Сделать это довольно просто:</p> <pre class="brush: css">h2:target { font-weight: bold; }</pre> @@ -29,7 +29,7 @@ original_slug: Web/CSS/CSS_Селекторы/Using_the_:target_pseudo-class_in_ <h2 id="Example" name="Example">Пример</h2> -<p>В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что <code><h1 id="one"></code> станет целевым элементом. Заметьте, что при прокутке документа целевые элементы располагаются вверху окна браузера, если это возможно.</p> +<p>В данном примере имеются пять ссылок, которые ссылаются на элементы одного и того же документа. Выбор ссылки "First" , например, приведёт к тому, что <code><h1 id="one"></code> станет целевым элементом. Заметьте, что при прокрутке документа целевые элементы располагаются вверху окна браузера, если это возможно.</p> <div id="example"> <pre class="brush: html"><h4 id="one">...</h4> <p id="two">...</p> diff --git a/files/ru/web/css/css_transitions/using_css_transitions/index.html b/files/ru/web/css/css_transitions/using_css_transitions/index.html index fe9483eea9..69572dcdd2 100644 --- a/files/ru/web/css/css_transitions/using_css_transitions/index.html +++ b/files/ru/web/css/css_transitions/using_css_transitions/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions --- <p>{{CSSref}}{{SeeCompatTable}}</p> -<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, измения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> +<p><span class="seoSummary"><strong>CSS transitions</strong> предоставляют способ контролировать скорость анимации, при изменении CSS свойств. Вместо того, чтобы свойство применилось сразу, вы можете сделать это действие происходящим в течение какого-то момента времени. Например, если вы смените цвет элемента с белого на чёрный, изменение произойдёт моментально, а вот с CSS transitions, изменения произойдут за временные интервалы, следующих кривой ускорения, все из которых могут быть настроены.</span></p> <p>Анимации, составляющие переход между двумя состояниями, часто называют <em>неявными переходами</em>, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.<img alt="A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions." src="/files/4529/TransitionsPrinciple.png" style="display: block; height: 196px; margin: auto; width: 680px;"></p> @@ -56,7 +56,7 @@ translation_of: Web/CSS/CSS_Transitions/Using_CSS_transitions <p>{{ EmbedLiveSample('Пример_анимирования_нескольких_свойств', 600, 300) }}</p> -<h2 id="CSS_свойства_опредяющие_переходы">CSS свойства, опредяющие переходы</h2> +<h2 id="CSS_свойства_определяющие_переходы">CSS свойства, определяющие переходы</h2> <p>CSS переходы контролируются свойством<a href="https://developer.mozilla.org/en-US/docs/CSS/transition"> </a>{{cssxref("transition")}}. Это лучший способ их настроить, позволяет избежать длинных свойств и их несоответствий, которые могут сделать отладку CSS долгой.</p> @@ -907,7 +907,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Когда_у_списков_значений_свойств_разные_длины">Когда у списков значений свойств разные длины</h2> -<p>Если любой список свойств короче, чем другие, его значения повторяюся, чтобы сделать его длину как и у других. Например:</p> +<p>Если любой список свойств короче, чем другие, его значения повторяются, чтобы сделать его длину как и у других. Например:</p> <pre class="brush: css">div { transition-property: opacity, left, top, height; @@ -938,7 +938,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <h2 id="Простой_пример">Простой пример</h2> -<p>Пример 4 секунды выполняет плавное измение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> +<p>Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навел мышь на элемент:</p> <pre class="brush: css">#delay1 { position: relative; @@ -960,7 +960,7 @@ var intervalID = window.setInterval(updateTransition, 7000); <p>Они часто используются для подсвечения элементов в меню при наведении мыши. С помощью переходов легко сделать такой эффект более привлекательным.</p> -<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также можеть <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p> +<p>Перед тем, как вы посмотрите на код, возможно захотите <a href="https://codepen.io/anon/pen/WOEpva">посмотреть на живое демо</a> (считаем, что ваш браузер поддерживает переходы). Также может <a href="/samples/cssref/transitions/sample2/transitions.css">посмотреть на CSS</a>, используемый этим примером.</p> <p>Сначала зададим меню в HTML:</p> @@ -1026,7 +1026,7 @@ document.addEventListener('click', function(ev){ },false); </pre> -<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое измение свойств происходит плавно:</p> +<p>C помощью CSS сглаживаем эффект без дополнительных усилий. Просто добавляем переход и любое изменение свойств происходит плавно:</p> <pre class="brush: css">p { padding-left: 60px; @@ -1142,7 +1142,7 @@ document.addEventListener('click', function(ev){ </table> </div> -<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестрандартное событие <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p> +<p>[1] Chrome 1.0, WebKit 3.2 и Android 2.1 выполняют нестандартное событие <code>webkitTransitionEnd</code>. Chrome 26.0 и WebKit 6.0 придерживаются стандарта <code>transitionend</code>.</p> <p>[2] Opera 10.5 и Opera Mobile 10 поддерживают <code>oTransitionEnd</code>, версия 12 понимает <code>otransitionend, а</code> версия 12.10 знает стандарт <code>transitionend</code>.</p> diff --git a/files/ru/web/css/cursor/index.html b/files/ru/web/css/cursor/index.html index ce3410ba94..714d6f9aba 100644 --- a/files/ru/web/css/cursor/index.html +++ b/files/ru/web/css/cursor/index.html @@ -31,7 +31,7 @@ cursor: unset; <dl> <dt><<code>url</code>></dt> - <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные сссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> + <dd>Ссылка или разделенный запятыми список ссылок: <code>url(…), url(…), …</code>, указывающие на файл изображения. Дополнительные ссылки могут быть предоставлены в качестве запасных значений, на случай если изображение по основной ссылке не поддерживается в качестве курсора. Запасное значение, не являющееся ссылкой (одно или несколько ключевых слов) <strong>должно </strong>находиться в конце списка значений. See <a href="/en-US/docs/CSS/Using_URL_values_for_the_cursor_property" title="Using_URL_values_for_the_cursor_property">Using URL values for the cursor property</a> for more details.</dd> <dt><code><x></code> <code><y></code> {{experimental_inline}}</dt> <dd>Необязательные значения х- и у- координат. Два безразмерных неотрицательных числа меньше 32.</dd> <dt>Ключевые слова</dt> @@ -125,7 +125,7 @@ cursor: unset; <td><code>move</code></td> <td><img alt="move.gif" src="/@api/deki/files/3443/=move.gif" style="height: 26px; width: 26px;"></td> <td> - <p>Указывает на возможностсь перемещения объекта.</p> + <p>Указывает на возможность перемещения объекта.</p> </td> </tr> <tr style="cursor: no-drop;"> @@ -154,7 +154,7 @@ cursor: unset; <tr style="cursor: row-resize;"> <td><code>row-resize</code></td> <td><img alt="row-resize.gif" src="/@api/deki/files/3451/=row-resize.gif" style="height: 26px; width: 26px;"></td> - <td>Обьект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.</td> + <td>Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные черты с вертикальными стрелочками.</td> </tr> <tr style="cursor: n-resize;"> <td><code>n-resize</code></td> diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html index facafe5d39..e71f5f129c 100644 --- a/files/ru/web/css/custom-ident/index.html +++ b/files/ru/web/css/custom-ident/index.html @@ -115,7 +115,7 @@ bili.bob Только буквы, цифры, _ и - можно не э <tr> <td>{{SpecName('CSS3 Values', '#custom-idents', '<code><custom-ident></code>')}}</td> <td>{{Spec2('CSS3 Values')}}</td> - <td>Переименовывает <code><identifier></code> в <code><custom-ident></code>. Делает его псевдо-типом и запрещает использование некоторых значчений.</td> + <td>Переименовывает <code><identifier></code> в <code><custom-ident></code>. Делает его псевдо-типом и запрещает использование некоторых значений.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'syndata.html#value-def-identifier', '<code><identifier></code>')}}</td> diff --git a/files/ru/web/css/descendant_combinator/index.html b/files/ru/web/css/descendant_combinator/index.html index 4498ab146b..b1305b3171 100644 --- a/files/ru/web/css/descendant_combinator/index.html +++ b/files/ru/web/css/descendant_combinator/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/Descendant_combinator <h2 id="Summary" name="Summary">Описание</h2> -<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответвующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и пременяют свои свойства ко всем элемнтам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> +<p>Комбинатор<code> ␣</code> (пробел) представляет собой 2 или более селекторов, найдет элементы соответствующие обоим селекторам. Селекторы по потомкам похожи на селекторы <a href="/ru/docs/Web/CSS/Child_selectors">дочерних элементов</a>, но они не учитывают вложенность элементов и применяют свои свойства ко всем элементам данного типа, находящимся внутри родительского элемента, независимо от глубины вложенности.</p> <h2 id="Syntax" name="Syntax">Синтаксис</h2> diff --git a/files/ru/web/css/flex-flow/index.html b/files/ru/web/css/flex-flow/index.html index f5fb0f51b3..3f816ff7b3 100644 --- a/files/ru/web/css/flex-flow/index.html +++ b/files/ru/web/css/flex-flow/index.html @@ -127,7 +127,7 @@ flex-flow: unset; </table> </div> -<p>[1] В дополенение к безпрефиксной поддержке, Gecko 48.0 {{geckoRelease("48.0")}} добавило поддержку для <code>-webkit</code> префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек <code>layout.css.prefixes.webkit</code>, по-умолчанию <code>false</code>. Поскольку Gecko 49.0 {{geckoRelease("49.0")}} предпочтительное значение по-умолчанию <code>true</code>.</p> +<p>[1] В дополнение к беспрефиксной поддержке, Gecko 48.0 {{geckoRelease("48.0")}} добавило поддержку для <code>-webkit</code> префиксной версии свойства для веб для веб совместимости, для тех кто не изменял значение своих настроек <code>layout.css.prefixes.webkit</code>, по умолчанию <code>false</code>. Поскольку Gecko 49.0 {{geckoRelease("49.0")}} предпочтительное значение по умолчанию <code>true</code>.</p> <h2 id="Смотрите_также">Смотрите также</h2> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 44914bcb02..345b55bbaa 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -33,7 +33,7 @@ flex-wrap: unset; <dt><code>nowrap</code></dt> <dd>Расположение в одну линию, может привести к переполнению контейнера. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения {{cssxref("flex-direction")}}.</dd> <dt><code>wrap</code></dt> - <dd>Расположение в несколько линий. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости отзначения <code>flex-direction</code> и свойство <strong>cross-end</strong> противоположно <strong>cross-start</strong>.</dd> + <dd>Расположение в несколько линий. Свойство <strong>cross-start</strong> эквивалентно <strong>start</strong> или <strong>before</strong> в зависимости от значения <code>flex-direction</code> и свойство <strong>cross-end</strong> противоположно <strong>cross-start</strong>.</dd> <dt><code>wrap-reverse</code></dt> <dd>Ведёт себя так же, как и <code>wrap</code> но <strong>cross-start</strong> и <strong>cross-end</strong> инвертированы.</dd> <dt> diff --git a/files/ru/web/css/flex/index.html b/files/ru/web/css/flex/index.html index d36c8ad65f..a0a28a86d8 100644 --- a/files/ru/web/css/flex/index.html +++ b/files/ru/web/css/flex/index.html @@ -185,12 +185,12 @@ flex.addEventListener("click", function() { </table> </div> -<p><sup><a name="bc1">[1]</a></sup> Для активации flexbox для Firefox 18 и 19 пользователю неободимо внести следующее изменение:<br> +<p><sup><a name="bc1">[1]</a></sup> Для активации flexbox для Firefox 18 и 19 пользователю необходимо внести следующее изменение:<br> свойство конфигурации "layout.css.flexbox.enabled" в<code>true</code>.</p> <p><sup><a name="bc2">[2]</a></sup> Multi-line flexbox поддерживается Firefox 28.</p> -<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (кроме 12+) игонорируют использование <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> во flex-basis части <code>flex</code> синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug # 8</a>.</p> +<p><sup><a name="flexbug8">[3]</a></sup> Internet Explorer 10-11 (кроме 12+) игнорируют использование <a href="/en-US/docs/Web/CSS/calc"><code>calc()</code></a> во flex-basis части <code>flex</code> синтаксиса. Это можно обойти, используя свойства longhand вместо сокращения. Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#8-flex-shorthand-doesnt-support-calc">Flexbug # 8</a>.</p> <p><sup><a name="flexbug4">[4]</a></sup> В Internet Explorer 10-11 (кроме 12+), объявление <code>flex</code> без единичного значения в его <em>flex-basis</em> части считается синтаксически недействительным и поэтому игнорируется. Обходной путь состоит в том, чтобы всегда включать единицу в <em>flex-basis </em>часть <code>flex</code> . Дополнительную информацию см. В <a href="https://github.com/philipwalton/flexbugs#4-flex-shorthand-declarations-with-unitless-flex-basis-values-are-ignored">Flexbug #4</a>.</p> diff --git a/files/ru/web/css/flex_value/index.html b/files/ru/web/css/flex_value/index.html index c43a75c0cc..2df121314f 100644 --- a/files/ru/web/css/flex_value/index.html +++ b/files/ru/web/css/flex_value/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/flex_value --- <div>{{CSSRef}}</div> -<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code><flex></code></strong> определеяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}.</p> +<p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/CSS_Types">тип данных</a> <strong><code><flex></code></strong> определяет гибкую длину в сеточном контейнере. Он используется в таких свойствах, как {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-rows")}}.</p> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/font-weight/index.html b/files/ru/web/css/font-weight/index.html index e8aad3aab1..386ede4092 100644 --- a/files/ru/web/css/font-weight/index.html +++ b/files/ru/web/css/font-weight/index.html @@ -58,7 +58,7 @@ font-weight: unset; <h3 id="Недоступность_заданного_значения">Недоступность заданного значения</h3> -<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображемого шрифта используется следующий алгоритм:</p> +<p>Если заданное цифровое значение насыщенности недоступно, для определения толщины отображаемого шрифта используется следующий алгоритм:</p> <ul> <li>Если задано значение выше <code>500</code>, будет использовано первое доступное более жирное начертание (если такого не окажется, то первое доступное более светлое).</li> diff --git a/files/ru/web/css/grid-area/index.html b/files/ru/web/css/grid-area/index.html index 447a22001f..dcbbae226f 100644 --- a/files/ru/web/css/grid-area/index.html +++ b/files/ru/web/css/grid-area/index.html @@ -51,7 +51,7 @@ grid-area: unset; <dd>- ключевое слово, говорящее о том, что свойство не вносит никаких изменений в размещение грид-элемента. На элемент действует авторазмещение или размер элемента по умолчанию <code>1</code>. <em>(то есть, элемент занимает одну ячейку грид-сетки в заданном направлении)</em></dd> <dt><code><custom-ident></code></dt> <dd>если есть именованная линия с именем '<code><custom-ident>-start</code>'/'<code><custom-ident>-end</code>', то грид-элемент привязывается к первой из таких линий. - <p class="note"><strong>Замечание:</strong> Именнованные грид-области автоматически генерируют неявные именнованные линии с именами подобного формата, поэтому запись <code>grid-area: foo;</code> выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем <code>foo-start</code>/<code>foo-end</code> не была явно определена раньше).</p> + <p class="note"><strong>Замечание:</strong> Именованные грид-области автоматически генерируют неявные именованные линии с именами подобного формата, поэтому запись <code>grid-area: foo;</code> выберет начальный/конечный край этой именованной грид-области (если, конечно, другая линия с именем <code>foo-start</code>/<code>foo-end</code> не была явно определена раньше).</p> <p>В противном случае, значение расценивается, как если бы число <code>1</code> было задано вместе с <code><custom-ident></code>.</p> </dd> diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index a0054ea9f0..35d6789975 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -39,7 +39,7 @@ grid-auto-flow: unset; <dt><code>column</code></dt> <dd>Ключевое слово, указывающее размещать элементы, заполняя поочередно каждый столбец и добавляя новые столбцы по мере необходимости.</dd> <dt><code>dense</code></dt> - <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответсвии с размером.</dd> + <dd>Ключевое слово, указывающее заполнять элементами свободное пространство сетки. Это может привести к нарушению порядка, т.к. элементы будут выстраиваться не в соответствии со своим расположением, а в соответствии с размером.</dd> <dd><br> Если свойство не используется, алгоритм разместит элементы строго по порядку, вне зависимости от наличия свободных ячеек.</dd> </dl> diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 6225dacb81..fda2e71bb3 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -52,7 +52,7 @@ grid-template-columns: unset; Ручное изменение размера элемента в процентах, приведёт к корректировочному изменению размера контейнера, и увеличит размер ряда на минимальную величину, необходимую для соблюдения процентного соотношения. </dd> <dt>{{cssxref("<flex>")}}</dt> <dd>Не-отрицательное значение с единицей измерения <code>fr</code>, которая строго определяет <em>flex фактор линий</em> (track’s flex factor, <em>фактор гибкости линий</em>). Каждая <code><flex></code>-размерная линия берёт оставшееся пространство пропорционально flex фактору. - <p>Когда из вне появляется <code>minmax()</code> , это предпологает автоматический минимум (т.е. <code>minmax(auto, <flex>)</code>).</p> + <p>Когда из вне появляется <code>minmax()</code> , это предполагает автоматический минимум (т.е. <code>minmax(auto, <flex>)</code>).</p> </dd> <dt id="max-content"><code>max-content</code></dt> <dd>Ключевое слово обозначающее самый большой из максимальных контентов элементов расположенных в данном треке.</dd> diff --git a/files/ru/web/css/grid-template-rows/index.html b/files/ru/web/css/grid-template-rows/index.html index bfd46f80d4..a6d1c4b36b 100644 --- a/files/ru/web/css/grid-template-rows/index.html +++ b/files/ru/web/css/grid-template-rows/index.html @@ -39,7 +39,7 @@ grid-template-rows: unset; <p>Это свойство может быть указано как:</p> <ul> - <li>либо с помощью ключегого слова: <code>none</code></li> + <li>либо с помощью ключевого слова: <code>none</code></li> <li>или значением <code><track-list></code> ,</li> <li>или значением <code><auto-track-list></code> .</li> </ul> diff --git a/files/ru/web/css/grid/index.html b/files/ru/web/css/grid/index.html index 94563bffc0..5ae9d4a987 100644 --- a/files/ru/web/css/grid/index.html +++ b/files/ru/web/css/grid/index.html @@ -12,7 +12,7 @@ translation_of: Web/CSS/grid <p>Свойство CSS <strong><code>grid</code></strong> является сокращенной формой записи, которая устанавливает значения для всех явных свойств сетки (grid) ({{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, и {{cssxref("grid-template-areas")}}), всех неявных свойств сетки (grid) ({{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-columns")}}, и {{cssxref("grid-auto-flow")}}), и свойств для промежутков между рядами и столбцами сетки ({{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}) в одной строчке.</p> -<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установленны в сокращенной форме записи.</p> +<p class="note"><strong>Note:</strong> В одной строке grid могут быть описаны свойства только одного вида: явные или неявные. Подсвойства, которые не были описаны, принимают, как и в других сокращенных формах записи свойств, значения по умолчанию. Кроме того, при помощи сокращенной формы записи значения свойств для промежутков между рядами и столбцами сетки по умолчанию сбрасываются, несмотря на то, что они не могут быть установлены в сокращенной форме записи.</p> <p>{{cssinfo}}</p> @@ -53,7 +53,7 @@ grid: unset; <dt><code><'grid-template'></code></dt> <dd>Определяет {{cssxref("grid-template")}} (шаблон сетки) включая {{cssxref("grid-template-columns")}} (столбцы), {{cssxref("grid-template-rows")}} (ряды) и {{cssxref("grid-template-areas")}} (области).</dd> <dt><code><'grid-template-rows'> / [ auto-flow && dense? ] <'grid-auto-columns'>?</code></dt> - <dd>Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцев со свойством <code>dense</code> если оно определено.</dd> + <dd>Устанавливает auto-flow явно задавая размещение по рядам с помощью свойства {{cssxref("grid-template-rows")}} (и устанавливая свойство {{cssxref("grid-template-columns")}} в значение <code>none</code>) и уточняет, как должно работать авто-повторение столбцов при помощи свойства {{cssxref("grid-auto-columns")}} (и устанавливая {{cssxref("grid-auto-rows")}} в значение <code>auto</code>). Свойство {{cssxref("grid-auto-flow")}} может быть так же установлено для столбцов со свойством <code>dense</code> если оно определено.</dd> <dd> <p>Все остальные подсвойства grid сбрасываются в их начальные значения .</p> </dd> @@ -185,7 +185,7 @@ grid: unset; <h2 id="Смотрите_также">Смотрите также</h2> <ul> - <li>Звязанные свойства CSS: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> + <li>Связанные свойства CSS: {{cssxref("grid-template")}}, {{cssxref("grid-template-rows")}}, {{cssxref("grid-template-columns")}}, {{cssxref("grid-template-areas")}}, {{cssxref("grid-auto-columns")}}, {{cssxref("grid-auto-rows")}}, {{cssxref("grid-auto-flow")}}</li> <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Line-based_Placement_with_CSS_Grid">Line-based placement with CSS Grid</a></em></li> <li>Руководство по разметке сетки: <em><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Grid_definition_shorthands">Grid template areas - Grid definition shorthands</a></em></li> </ul> diff --git a/files/ru/web/css/height/index.html b/files/ru/web/css/height/index.html index 201fecc7b6..a1405ed89b 100644 --- a/files/ru/web/css/height/index.html +++ b/files/ru/web/css/height/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/height {{EmbedInteractiveExample("pages/css/height.html")}}</p> <div class="hidden"> -<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p>Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> </div> <p><br> @@ -161,7 +161,7 @@ height: unset; <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> <div class="hidden"> -<p>Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</p> +<p>Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</p> </div> <p>{{Compat("css.properties.height")}}</p> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 803caf1c0d..5a256e224d 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/hyphens --- <div>{{CSSRef}}</div> -<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>hyphens</code></strong> указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк.</span> Оно может полность запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p> +<p><span class="seoSummary"><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>hyphens</code></strong> указывает, как следует переносить слова через дефис, когда текст переносится на несколько строк.</span> Оно может полностью запретить перенос, делать перенос в местах, заданных вручную или позволять браузеру автоматически расставлять переносы, где это необходимо.</p> <div>{{EmbedInteractiveExample("pages/css/hyphens.html")}}</div> diff --git a/files/ru/web/css/inheritance/index.html b/files/ru/web/css/inheritance/index.html index 210b467c6d..ec125b3493 100644 --- a/files/ru/web/css/inheritance/index.html +++ b/files/ru/web/css/inheritance/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/inheritance --- <h2 id="Описание">Описание</h2> -<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS свойства</a> говорит наследуется ли оно по-умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p> +<p>Описание каждого <a href="/ru/docs/Web/CSS/Reference" title="en/CSS_Reference">CSS свойства</a> говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.</p> <h2 id="Inherited_properties" name="Inherited_properties">Наследуемые свойства</h2> diff --git a/files/ru/web/css/initial/index.html b/files/ru/web/css/initial/index.html index e4f1e9c456..65187f0ab5 100644 --- a/files/ru/web/css/initial/index.html +++ b/files/ru/web/css/initial/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/initial --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восcтановления всех CSS свойств до их начальных значений.</p> +<p><span class="seoSummary">Ключевое слово <strong><code>initial</code></strong> (CSS) устанавливает свойство элемента в <a href="/ru/docs/Web/CSS/initial_value">начальное (или по умолчанию) значение</a>. Это может быть применимо к любому свойству CSS.</span> Это относится также к CSS свойству {{cssxref("all")}}, с которым <code>initial</code> может быть использовано для восстановления всех CSS свойств до их начальных значений.</p> <div class="note"> <p><strong>Примечание:</strong> На <a href="/ru/docs/Web/CSS/inheritance#Inherited_properties">наследуемые свойства</a> действие значения initial может быть непредвиденным. Вы должны рассмотреть возможность использования ключевых слов {{cssxref("inherit")}}, {{cssxref("unset")}} или {{cssxref("revert")}} вместо него.</p> diff --git a/files/ru/web/css/integer/index.html b/files/ru/web/css/integer/index.html index a1f11a3a46..c608250e6c 100644 --- a/files/ru/web/css/integer/index.html +++ b/files/ru/web/css/integer/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/integer <p>Тип данных <code><integer></code> состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы <code>+</code> и <code>-</code> необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.</p> -<div class="note"><strong>Запомните:</strong> Не существует оффициального диапазона значений типа <code><integer></code>. Opera 12.1 поддерживает значения до 2<sup>15</sup>-1, IE - до 2<sup>20</sup>-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального ренжа: последнее решение, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">в апреле 2012 напротяжении фазы LC</a>, было [-2<sup>27</sup>-1; 2<sup>27</sup>-1], но остальные значения, такие как 2<sup>24</sup>-1 и 2<sup>30</sup>-1, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">также были предложены</a>. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.</div> +<div class="note"><strong>Запомните:</strong> Не существует официального диапазона значений типа <code><integer></code>. Opera 12.1 поддерживает значения до 2<sup>15</sup>-1, IE - до 2<sup>20</sup>-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального диапазона: последнее решение, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0633.html">в апреле 2012 на протяжении фазы LC</a>, было [-2<sup>27</sup>-1; 2<sup>27</sup>-1], но остальные значения, такие как 2<sup>24</sup>-1 и 2<sup>30</sup>-1, <a href="http://lists.w3.org/Archives/Public/www-style/2012Apr/0530.html">также были предложены</a>. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.</div> <h2 id="Интерполяция">Интерполяция</h2> @@ -101,7 +101,7 @@ _5 Специальные знаки запрещены. <table class="compat-table"> <tbody> <tr> - <th>Обобенность</th> + <th>Особенность</th> <th>Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Phone</th> diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index 8775c76caf..5b91650bcf 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -74,7 +74,7 @@ justify-content: unset; <dt><code>right</code></dt> <dd>Элементы располагаются друг за другом и прижимаются к правому краю контейнера по главной оси. Если главная ось не горизонтальна, это значение работает как <code>start</code>.</dd> <dt><code>normal</code></dt> - <dd>Элементы располагаются на свох обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd> + <dd>Элементы располагаются на своих обычных позициях, так как будто свойство <code>justify-content</code> не задано. Этот параметр ведет себя как <code>stretch</code> в grid и flex контейнерах.</dd> <dt><code>baseline<br> first baseline</code><br> <code>last baseline</code></dt> diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index d020e3f474..4e28a766e9 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -83,7 +83,7 @@ justify-items: unset; <dd>Эффект этого атрибута зависит от выбранного способа разметки: <ul> <li>Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова <code>start</code></li> - <li>Для разметки с абсолютно позиционнированными элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> + <li>Для разметки с абсолютно позиционированный элементами, это ключевое слово ведет себя как <code>start</code> на замененных блоках с абсолютным позиционированием и как <code>stretch</code> на всех остальных блоках с абсолютным позиционированием</li> <li>Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> <li>Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут <em>игнорируется</em></li> <li>Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению <code>stretch</code>, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведет себя как <code>start</code></li> diff --git a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html index f2452542a7..6dab482257 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation </div> <div class="blockIndicator note"> -<p><strong>Примечение</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> +<p><strong>Примечание</strong>: В приведенном выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> <pre class="notranslate">.breadcrumb li:not(:first-child)::before { content: "→"; diff --git a/files/ru/web/css/layout_cookbook/index.html b/files/ru/web/css/layout_cookbook/index.html index 5c53652804..ca19142c28 100644 --- a/files/ru/web/css/layout_cookbook/index.html +++ b/files/ru/web/css/layout_cookbook/index.html @@ -11,7 +11,7 @@ tags: translation_of: Web/CSS/Layout_cookbook --- <div>{{CSSRef}}<br> -Книга рецептов CSS объединяет примеры большинства наиболее распространненых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> +Книга рецептов CSS объединяет примеры большинства наиболее распространенных лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.<br> <br> В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.</div> diff --git a/files/ru/web/css/layout_mode/index.html b/files/ru/web/css/layout_mode/index.html index eed469409b..3be34f7296 100644 --- a/files/ru/web/css/layout_mode/index.html +++ b/files/ru/web/css/layout_mode/index.html @@ -11,7 +11,7 @@ original_slug: Web/CSS/Способ_расположения <ul> <li><em>Обычная</em> <em>(Normal Flow)</em> — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный <em>layout </em>включает в себя <em>блочную раскладку</em>, созданную для расположения отдельных блоков, таких как параграфы, и <em>линейную,</em>—<em> </em>для строчных элементов;</li> <li><em><a href="/ru/docs/Web/CSS/CSS_Table">Табличная</a></em>, спроектированная для расположения таблиц;</li> - <li><em>Float layout </em>— для возможности обозначить элементы <em><a href="/ru/docs/CSS/float" title="/ru/docs/CSS/float">плавающими</a>. </em>Такой<em> </em>элемент начинает позиционироваться слева или справа отностительно содержимого обычного потока, элементы которого начинают обтекать него;</li> + <li><em>Float layout </em>— для возможности обозначить элементы <em><a href="/ru/docs/CSS/float" title="/ru/docs/CSS/float">плавающими</a>. </em>Такой<em> </em>элемент начинает позиционироваться слева или справа относительно содержимого обычного потока, элементы которого начинают обтекать него;</li> <li><em><a href="/ru/docs/Web/CSS/CSS_Positioning">Позиционированная</a> </em>— для позиционирования элементов без особого взаимодействия с другими элементами;</li> <li><em><a href="/ru/docs/Web/CSS/CSS_Columns">Множественные столбцы</a></em> — для расположения контента колонками, как в газетах;</li> <li><em><a href="/ru/docs/Web/CSS/CSS_Flexible_Box_Layout">Флексбокс</a> </em><em>(CSS Flexible Box Layout)</em> — для расположения сложных страниц, которые плавно могут изменять свой размер; {{ experimental_inline() }}</li> diff --git a/files/ru/web/css/length/index.html b/files/ru/web/css/length/index.html index 287959e343..2115159b7d 100644 --- a/files/ru/web/css/length/index.html +++ b/files/ru/web/css/length/index.html @@ -56,7 +56,7 @@ original_slug: Web/CSS/размер <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rem</span></font></dt> <dd>Представляет размер шрифта корневого элемента (обычно {{HTMLElement("html")}}). Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию (в большинстве браузеров <code>16px</code>, но настройки пользователя могут переопределить это значение).</dd> <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">rlh</span></font> {{experimental_inline}}</dt> - <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого эдемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd> + <dd>Равна рассчитанному значению свойства {{Cssxref("line-height")}} корневого элемента (обычно {{HTMLElement("html")}}), переведённому в абсолютные единицы измерения. Когда используется в свойстве {{Cssxref("font-size")}} корневого элемента, представляет значение по умолчанию.</dd> </dl> <h5 id="Единицы_зависящие_от_размеров_экрана">Единицы, зависящие от размеров экрана</h5> @@ -80,7 +80,7 @@ original_slug: Web/CSS/размер <h4 id="Абсолютные_единицы_измерения">Абсолютные единицы измерения</h4> -<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойтсва устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p> +<p>Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойства устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.</p> <p>Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения <code>px</code> представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, <code>1in</code> определяется как <code>96px</code>, что равно <code>72pt</code>. Последствием такого способа определения является то, что длины, описанные в дюймах (<code>in</code>), сантиметрах (<code>cm</code>) или миллиметрах (<font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mm</span></font>) необязательно равны одноимённым физическим единицам.</p> @@ -106,7 +106,7 @@ original_slug: Web/CSS/размер <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">pt</span></font></dt> <dd>Одна точка. <code>1pt</code> = 1/72 от<code>1in</code>.</dd> <dt><font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">mozmm</span></font> {{non-standard_inline}}, удалена в Firefox 59</dt> - <dd>Экспериметальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd> + <dd>Экспериментальная единица, которая равна одному физическому миллиметру вне зависимости от размера и разрешения экрана. Такая единица требуется очень редко, но может понадобиться, особенно на маленьких устройствах.</dd> </dl> <h2 id="Интерполяция">Интерполяция</h2> diff --git a/files/ru/web/css/letter-spacing/index.html b/files/ru/web/css/letter-spacing/index.html index 26fff4a355..2947111978 100644 --- a/files/ru/web/css/letter-spacing/index.html +++ b/files/ru/web/css/letter-spacing/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/letter-spacing <div>{{EmbedInteractiveExample("pages/css/letter-spacing.html")}}</div> -<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучавствовать в их улучшении, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p> +<p class="hidden">Исходники для интерактивных примеров находятся в репозитории на GitHub. Если вы желаете поучаствовать в их улучшении, пожалуйста склонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам pull-реквест.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -66,7 +66,7 @@ letter-spacing: unset; <h2 id="Проблемы_доступности">Проблемы доступности</h2> -<p>Большие положительные или отрицательные значения свойства <code>letter-spacing</code> могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойтва, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.</p> +<p>Большие положительные или отрицательные значения свойства <code>letter-spacing</code> могут сделать текст, к которому применяется форматирование, нечитаемым. При очень больших положительных значениях этого свойства, буквы в тексте будут настолько далеко друг от друга, что не будут восприниматься как цельные слова. При очень больших отрицательных значениях буквы будут перекрываться друг другом до такой степени, что слова могут стать неразличимы.</p> <p>Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.</p> diff --git a/files/ru/web/css/margin-bottom/index.html b/files/ru/web/css/margin-bottom/index.html index 9e59ba8534..8d8f296361 100644 --- a/files/ru/web/css/margin-bottom/index.html +++ b/files/ru/web/css/margin-bottom/index.html @@ -133,6 +133,6 @@ div { <h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.margin-bottom")}}</p> diff --git a/files/ru/web/css/margin-inline-end/index.html b/files/ru/web/css/margin-inline-end/index.html index 91d3b321f2..bb60decafb 100644 --- a/files/ru/web/css/margin-inline-end/index.html +++ b/files/ru/web/css/margin-inline-end/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/margin-inline-end --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> Свойство <strong> <code>margin-inline-end </code></strong> определяет отступ логического края элемента, который сопоставляется с физическим отступом в зависимомти от режима написания, направленности и расположения текста. То есть оно соответствует {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} или {{cssxref("margin-left")}} свойству в зависимости от числа определяющего {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> +<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> Свойство <strong> <code>margin-inline-end </code></strong> определяет отступ логического края элемента, который сопоставляется с физическим отступом в зависимости от режима написания, направленности и расположения текста. То есть оно соответствует {{cssxref("margin-top")}}, {{cssxref("margin-right")}}, {{cssxref("margin-bottom")}} или {{cssxref("margin-left")}} свойству в зависимости от числа определяющего {{cssxref("writing-mode")}}, {{cssxref("direction")}}, и {{cssxref("text-orientation")}}.</p> <div>{{EmbedInteractiveExample("pages/css/margin-inline-end.html")}}</div> diff --git a/files/ru/web/css/margin-left/index.html b/files/ru/web/css/margin-left/index.html index b75485ce81..e96efae043 100644 --- a/files/ru/web/css/margin-left/index.html +++ b/files/ru/web/css/margin-left/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/margin-left <div>{{EmbedInteractiveExample("pages/css/margin-left.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p> @@ -162,6 +162,6 @@ margin-left: unset; <h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.margin-left")}}</p> diff --git a/files/ru/web/css/margin-right/index.html b/files/ru/web/css/margin-right/index.html index f65c1798ad..c435531bdb 100644 --- a/files/ru/web/css/margin-right/index.html +++ b/files/ru/web/css/margin-right/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/margin-right <div>{{EmbedInteractiveExample("pages/css/margin-right.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>Вертикальные внешние отступы двух соседних блоков могут схлопнуться. Это называется <a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">схлопыванием внешних отступов</a>.</p> @@ -155,6 +155,6 @@ margin-right: unset; <h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.margin-right")}}</p> diff --git a/files/ru/web/css/max-block-size/index.html b/files/ru/web/css/max-block-size/index.html index 0011cd784e..416987e8b3 100644 --- a/files/ru/web/css/max-block-size/index.html +++ b/files/ru/web/css/max-block-size/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/max-block-size --- <p>{{CSSRef}}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока взависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, взависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> +<p><a href="/en-US/docs/Web/CSS" title="CSS">CSS</a> свойство<strong> <code>max-block-size</code></strong> определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо {{cssxref("max-width")}}, либо {{cssxref("max-height")}}, в зависимости от значения определенного в {{cssxref("writing-mode")}}. Если последнее свойство вертикально ориентировано, значит значение свойства <code>max-block-size</code> относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to {{cssxref("max-inline-size")}}, which defines the other dimension of the element.</p> <pre class="brush:css no-line-numbers">/* <length> values */ max-block-size: 300px; diff --git a/files/ru/web/css/max-height/index.html b/files/ru/web/css/max-height/index.html index 49970647ac..309daf43d1 100644 --- a/files/ru/web/css/max-height/index.html +++ b/files/ru/web/css/max-height/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/max-height <div>{{EmbedInteractiveExample("pages/css/max-height.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>{{ Cssxref("max-height") }} перекрывает {{cssxref("height")}}, но {{ Cssxref("min-height") }} перекрывает {{ Cssxref("max-height") }}.</p> @@ -112,7 +112,7 @@ form { max-height: none; } <h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.max-height")}}</p> diff --git a/files/ru/web/css/max-width/index.html b/files/ru/web/css/max-width/index.html index 7988efa878..6f90e1c740 100644 --- a/files/ru/web/css/max-width/index.html +++ b/files/ru/web/css/max-width/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/max-width <div>{{EmbedInteractiveExample("pages/css/max-width.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>{{ Cssxref("max-width") }} перекрывает {{cssxref("width")}}, но {{ Cssxref("min-width") }} перекрывает {{ Cssxref("max-width") }}.</p> @@ -157,7 +157,7 @@ max-width: unset; <h2 id="Browser_Compatibility" name="Browser_Compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.max-width")}}</p> diff --git a/files/ru/web/css/media_queries/index.html b/files/ru/web/css/media_queries/index.html index b0300f3174..148efccbea 100644 --- a/files/ru/web/css/media_queries/index.html +++ b/files/ru/web/css/media_queries/index.html @@ -14,7 +14,7 @@ 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 адаптироваться в зависимости от различных параметров или характеристик устройства. Например, media query может применить различные стили если экран меньше определенного размера, или в зависимости от того находится устройство в портретном или альбомном режиме. {{cssxref("@media")}} at-правило используется чтобы задать условия применения стилей к документу.</p> <p>Кроме того, media query синтаксис используется в других контекстах, таких как атрибут {{htmlattrxref("media", "source")}} элемента {{HTMLElement("source")}}, который может быть установлен в media query строку, чтобы определять нужно или нет использовать этот источник, когда выбирается определенное изображение для использования в элементе {{HTMLElement("picture")}}.</p> 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 d7f3f0cb76..ad52c96772 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 @@ -13,7 +13,7 @@ original_slug: Web/CSS/Media_Queries/Тестирование_медиа_зап <h2 id="Создание_списка_медиа-запросов">Создание списка медиа-запросов</h2> -<p>Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используйется метод {{domxref("window.matchMedia") }}.</p> +<p>Прежде, чем вы сможете оценить результаты медиа-запросов, вам необходимо создать объект {{domxref("MediaQueryList") }} , отражающий запрос. Для этого используется метод {{domxref("window.matchMedia") }}.</p> <p>Например, настройка списка запросов, который определяет, находится ли устройство в альбомной или книжной ориентации:</p> diff --git a/files/ru/web/css/min-height/index.html b/files/ru/web/css/min-height/index.html index 417cc8bcd5..cb60e09c46 100644 --- a/files/ru/web/css/min-height/index.html +++ b/files/ru/web/css/min-height/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/min-height <div>{{EmbedInteractiveExample("pages/css/min-height.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>Высота элемента принимает значение <code>min-height</code> всякий раз, когда <code>min-height</code> больше чем {{ Cssxref("max-height") }} или {{Cssxref("height")}}.</p> @@ -107,7 +107,7 @@ form { min-height: 0; } <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.min-height")}}</p> diff --git a/files/ru/web/css/min-width/index.html b/files/ru/web/css/min-width/index.html index 90d8714d58..7995a81f4d 100644 --- a/files/ru/web/css/min-width/index.html +++ b/files/ru/web/css/min-width/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/min-width <div>{{EmbedInteractiveExample("pages/css/min-width.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>Ширина элемента принимает значение <code>min-width</code> когда <code>min-width</code> больше чем {{ Cssxref("max-width") }} или {{Cssxref("width")}}.</p> @@ -106,7 +106,7 @@ form { min-width: 0; } <h2 id="Browser_compatibility" name="Browser_compatibility">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.min-width")}}</p> diff --git a/files/ru/web/css/overflow-block/index.html b/files/ru/web/css/overflow-block/index.html index af904ac6ac..ead0067598 100644 --- a/files/ru/web/css/overflow-block/index.html +++ b/files/ru/web/css/overflow-block/index.html @@ -8,7 +8,7 @@ translation_of: Web/CSS/overflow-block <p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <strong><code>overflow-block</code></strong> устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.</p> <div class="note"> -<p>Свойтсво <code>overflow-block</code> отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.</p> +<p>Свойство <code>overflow-block</code> отображается на {{Cssxref("overflow-y")}} или {{Cssxref("overflow-x")}} в зависимости от режима записи документа.</p> </div> <h2 id="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/overflow/index.html b/files/ru/web/css/overflow/index.html index e8977b7592..58a572c013 100644 --- a/files/ru/web/css/overflow/index.html +++ b/files/ru/web/css/overflow/index.html @@ -31,7 +31,7 @@ overflow: inherit <dt><code>visible</code></dt> <dd>По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.</dd> <dt><code>hidden</code></dt> - <dd>Контет обрезается, без предоставления прокрутки.</dd> + <dd>Контент обрезается, без предоставления прокрутки.</dd> <dt><code>scroll</code></dt> <dd>Содержимое обрезается и браузер использует элементы прокрутки, не важно было ли обрезано содержимое или нет. Это избегает многих проблем касательно появления прокруток и их исчезновения в динамичной среде. Принтеры могу печатать переполненное содержимое.</dd> <dt><code>auto</code></dt> diff --git a/files/ru/web/css/padding/index.html b/files/ru/web/css/padding/index.html index 3644516251..8ab7697255 100644 --- a/files/ru/web/css/padding/index.html +++ b/files/ru/web/css/padding/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/padding <p class="summary">Свойство <strong><code>padding</code></strong> устанавливает внутренние отступы/поля со всех сторон элемента. <a href="/en/CSS/box_model#padding">Область отступов</a> это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.</p> -<p class="summary">Cвойство <code>padding</code> краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p> +<p class="summary">Свойство <code>padding</code> краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (<code>padding-top</code>, <code>padding-right</code>, <code>padding-bottom</code>, <code>padding-left</code>).</p> <p>{{cssinfo}}</p> @@ -43,7 +43,7 @@ padding: unset; <dl> <dt><code><length></code></dt> - <dd>Устанавливает неотрицательный, фиксированый размер. Подробнее в разделе {{cssxref("<length>")}}.</dd> + <dd>Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе {{cssxref("<length>")}}.</dd> <dt><code><percentage></code></dt> <dd>Относительно ширины родительского блока.</dd> </dl> diff --git a/files/ru/web/css/paint-order/index.html b/files/ru/web/css/paint-order/index.html index 8d9151a92c..c2bcbbf9bf 100644 --- a/files/ru/web/css/paint-order/index.html +++ b/files/ru/web/css/paint-order/index.html @@ -27,7 +27,7 @@ paint-order: markers stroke fill; /* отрисовывает маркеры, з <p>Если значение не указано, значением по умолчанию является следующий порядок <code>fill</code>, <code>stroke</code>, <code>markers</code>.</p> -<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном поряд друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p> +<p>Когда указано одно значение, то сначала отрисовывается оно, затем два других в дефолтном порядке друг относительно друга. Когда указано два значения, они будут отрисованы в указанном порядке, а затем будет отрисовано неопределенное значение.</p> <div class="note"> <p><strong>Примечание</strong>: В этом случае, маркеры отрисовываются только при рисовании форм SVG. включающих использование свойств <code>marker-*</code> (например <code><a href="/en-US/docs/Web/SVG/Attribute/marker-start">marker-start</a></code>) и элемента <code><a href="/en-US/docs/Web/SVG/Element/marker"><marker></a></code>. Они не применяются к тексту HTML, в этом случае, вы можете определить только порядок <code>stroke</code> и <code>fill</code>.</p> diff --git a/files/ru/web/css/perspective/index.html b/files/ru/web/css/perspective/index.html index a5352cdfd3..b0d1d14fc1 100644 --- a/files/ru/web/css/perspective/index.html +++ b/files/ru/web/css/perspective/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/perspective <p>Элементы части которые находятся за пользователем, т.е. z-координата этих элементов больше чем значение свойства <code>perspective, не отрисовываются.</code></p> -<p><em><code>Точка схождения </code></em><code>по-умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p> +<p><em><code>Точка схождения </code></em><code>по умолчанию расположена в центре элемента, но её можно переместить используя свойство </code>{{ cssxref("perspective-origin") }}.</p> <p>При использовании данного свойства со значениями отличными от 0 или none создается новый <a href="/en/CSS/Understanding_z-index/The_stacking_context" title="en/CSS/Understanding_z-index/The_stacking_context">stacking context</a>.</p> @@ -36,7 +36,7 @@ perspective: unset; <dl> <dt><code>none</code></dt> - <dd><font face="Consolas, Liberation Mono, Courier, monospace">Указывает что трасформация перспективы к элементу применяться не будет.</font></dd> + <dd><font face="Consolas, Liberation Mono, Courier, monospace">Указывает что трансформация перспективы к элементу применяться не будет.</font></dd> <dt><code><length></code></dt> <dd>{{cssxref("<length>")}} у<code>станавливает растояние от пользователя до плоскости z = 0. Применяет трасформацию к элементу и его содержимому. Если значение отрицательно или равно 0, то преобразование не применяется.</code></dd> </dl> @@ -200,7 +200,7 @@ th, p, td { <tr> <th scope="col">Спецификация</th> <th scope="col">Статус</th> - <th scope="col">Коментарий</th> + <th scope="col">Комментарий</th> </tr> </thead> <tbody> diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html index bc089191f8..61b1135e27 100644 --- a/files/ru/web/css/pointer-events/index.html +++ b/files/ru/web/css/pointer-events/index.html @@ -42,7 +42,7 @@ pointer-events: unset; <dt><code>auto</code></dt> <dd>Элемент ведёт себя так же, как и если бы свойство <code>pointer-events</code> не было задано. В SVG это значение даёт такой же эффект, как и значение <code>visiblePainted</code>.</dd> <dt><code>none</code></dt> - <dd>Элемент не может быть целью (<a href="/ru/docs/Web/API/event/target">target</a>) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <code>pointer-events</code> имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/<a href="/ru/docs/Web/API/event/bubbles">всплытия</a><code>.</code></dd> + <dd>Элемент не может быть целью (<a href="/ru/docs/Web/API/event/target">target</a>) событий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <code>pointer-events</code> имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/<a href="/ru/docs/Web/API/event/bubbles">всплытия</a><code>.</code></dd> <dt><code>visiblePainted</code></dt> <dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>.</dd> <dt><code>visibleFill</code></dt> diff --git a/files/ru/web/css/position/index.html b/files/ru/web/css/position/index.html index cdd1a30f08..3baa0548f0 100644 --- a/files/ru/web/css/position/index.html +++ b/files/ru/web/css/position/index.html @@ -16,13 +16,13 @@ translation_of: Web/CSS/position <h3 id="Типы_позиционирования">Типы позиционирования</h3> <ul> - <li><strong>Позиционируемый элемент</strong> — это элемент, у которого {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>relative</code>, <code>absolute</code>, <code>fixed</code> либо <code>sticky</code>. (Другими словами, это вce, кроме <code>static</code>.)</li> + <li><strong>Позиционируемый элемент</strong> — это элемент, у которого {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>relative</code>, <code>absolute</code>, <code>fixed</code> либо <code>sticky</code>. (Другими словами, это все, кроме <code>static</code>.)</li> <li><strong>Относительно позиционируемый элемент</strong> является элементом, {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> которого является <code>relative</code>. Свойства {{cssxref('top')}} и {{cssxref('bottom')}} определяют смещение по вертикали от его нормального положения; свойства {{cssxref('left')}} и {{cssxref('right')}} задают горизонтальное смещение.</li> <li><strong>Абсолютно позиционируемый элемент</strong> — это элемент, чьё {{cssxref('computed_value', 'вычисленное значение')}} <code>position</code> является <code>absolute</code> или <code>fixed</code>. {{cssxref('top')}}, {{cssxref('right')}}, {{cssxref('bottom')}} и {{cssxref('left')}} задают смещения от краёв {{cssxref('Containing_Block', 'содержащего блок элемента')}}. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый <a href="../Guide/CSS/Block_formatting_context">контекст форматирования блока</a> (BFC) для своего содержимого.</li> <li><strong>Элемент с липкой позицией</strong> — это элемент, у которого {{cssxref('computed_value', 'значение вычисленного')}} <code>position</code> является <code>sticky</code>. Он рассматривается как относительно позиционированный до тех пор, пока {{cssxref('Containing_Block', 'содержащий его блок')}} не пересечёт указанный порог (например, установка {{cssxref('top')}} в значение, отличное от <code>auto</code>) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край {{cssxref('Containing_Block', 'содержащего его блока')}}.</li> </ul> -<p>В большинстве случаев абсолютно cпозиционированные элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно cпозиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> +<p>В большинстве случаев абсолютно позиционированный элементы, которые имеют {{cssxref('height')}} и {{cssxref('width')}} установленные в <code>auto</code>, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированный элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как {{cssxref('top')}}, так и {{cssxref('bottom')}}, и оставляя {{cssxref('height')}} неопределенным (то есть , <code>auto</code>). Ими также можно заполнить доступное горизонтальное пространство, указав как {{cssxref('left')}}, так и {{cssxref('right')}}, и оставляя {{cssxref('width')}} как <code>auto</code>.</p> <p>За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):</p> diff --git a/files/ru/web/css/pseudo-classes/index.html b/files/ru/web/css/pseudo-classes/index.html index 1b27fa85c5..b5f50c4d0c 100644 --- a/files/ru/web/css/pseudo-classes/index.html +++ b/files/ru/web/css/pseudo-classes/index.html @@ -106,7 +106,7 @@ original_slug: Web/CSS/Псевдо-классы <td>{{SpecName('CSS4 Selectors')}}</td> <td>{{Spec2('CSS4 Selectors')}}</td> <td>Определены <code>:any-link</code>, <code>:local-link</code>, <code>:scope</code>, <code>:active-drop-target</code>, <code>:valid-drop-target</code>, <code>:invalid-drop-target</code>, <code>:current</code>, <code>:past</code>, <code>:future</code>, <code>:placeholder-shown</code>, <code>:user-error</code>, <code>:blank</code>, <code>:nth-match()</code>, <code>:nth-last-match()</code>, <code>:nth-column()</code>, <code>:nth-last-column()</code> и <code>:matches()</code>.<br> - Нет существенных изменений для псевдоклассов, определённых в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (не рассматрия семантическое значение).</td> + Нет существенных изменений для псевдоклассов, определённых в {{SpecName('CSS3 Selectors')}} и {{SpecName('HTML5 W3C')}} (не рассматривая семантическое значение).</td> </tr> <tr> <td>{{ SpecName('HTML5 W3C') }}</td> diff --git a/files/ru/web/css/radial-gradient()/index.html b/files/ru/web/css/radial-gradient()/index.html index 3d9a247da7..7d7c95d25f 100644 --- a/files/ru/web/css/radial-gradient()/index.html +++ b/files/ru/web/css/radial-gradient()/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/radial-gradient() -<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, тоесть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.</p> +<p>Как и любой градиент, радиальный градиент не имеет <a href="https://developer.mozilla.org/en-US/docs/CSS/image#no_intrinsic">внутренних размеров</a>, то есть заданных или предпочитаемых размеров, как и заданного коэффициента соотношения сторон. Его итоговый размер будет соответствовать размеру элемента к которому он применен.</p> <p>Чтобы создать повторяющийся радиальный градиент, который будет заполнять контейнер, необходимо использовать функцию {{cssxref("repeating-radial-gradient")}}.</p> @@ -19,11 +19,11 @@ translation_of: Web/CSS/radial-gradient() <h2 id="Композиция_свойства">Композиция свойства</h2> -<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальнй градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> +<p><img alt="" src="/files/3795/radial%20gradient.png" style="float: left; height: 176px; width: 396px;">Радиальный градиент задается <em>позицией центра</em>, <em>конечной формой</em>, и двумя или более <em>точками изменения цвета</em>.</p> <p>Чтобы создать плавный градиент, функция <code>radial-gradient()</code> рисует серию концентрических форм исходящих из центра к краям формы градиента (и потенциально далее за его пределы). Конечная форма может быть как кругом так и эллипсом.</p> -<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах расчитывается относительно пересечения конечной формы таким лучем, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p> +<p>Точки изменения цвета расположены на <em>виртуальном луче градиента</em>, который расширяется горизонтально направо. Позиция точек заданных в процентах рассчитывается относительно пересечения конечной формы таким лучом, что является <code>100%</code>. Цвет каждой такой формы задается цветом на пересечении луча градиента и этой формы.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -67,11 +67,11 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> </table> <div class="note"> - <p><strong>Заметка:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекоментуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p> + <p><strong>Заметка:</strong> Ранние реализации этой функции включают в себя другие значения свойства (<code>cover</code> and <code>contain</code>) которые являются синонимами <span class="st"><code>farthest-corner</code></span> и <code>closest-side</code>, соответственно. Рекомендуется использовать только стандартные значения, так как некоторые реализации уже перестали использовать старые значения свойств.</p> </div> </dd> <dt><code><color-stop></code></dt> - <dd>{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучем граддиента. Процентные значения будут линейно расположены на луче градиента.</dd> + <dd>{{cssxref("<color>")}} значение цвета в точке изменения цвета за которым следует необязательный параметр позиции ({{cssxref("<percentage>")}} или {{cssxref("<length>")}} вдоль оси градиента). Значения <code>0%</code>, или <code>0</code> представляют центр градиента; значение <code>100%</code> представляет собой виртуальное пересечение конечной формы с виртуальным лучом градиента. Процентные значения будут линейно расположены на луче градиента.</dd> </dl> <h3 id="Синтаксис_2">Синтаксис</h3> @@ -128,7 +128,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <p>{{EmbedLiveSample('Градиент_со_смещенным_центром', 240, 120)}}</p> <div class="note"> -<p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Использование CSS градиентов</a>.</p> +<p><strong>Заметка:</strong> Дополнительные примеры можно найти в <a href="/en-US/docs/Web/CSS/CSS_Images/Using_CSS_gradients">Ииспользование CSS градиентов</a>.</p> </div> <h2 id="Спецификация">Спецификация</h2> @@ -166,7 +166,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <th>Safari</th> </tr> <tr> - <td>Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td> + <td>Стандартное ииспользование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td> <td>{{CompatGeckoDesktop("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> {{CompatGeckoDesktop("16")}}</td> <td>10.0 (534.16){{property_prefix("-webkit")}}<sup>[2]</sup></td> @@ -175,7 +175,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <td>5.1{{property_prefix("-webkit")}}<sup>[2]</sup></td> </tr> <tr> - <td>Использование в {{cssxref("border-image")}}</td> + <td>Ииспользование в {{cssxref("border-image")}}</td> <td>{{CompatGeckoDesktop("29")}}</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatVersionUnknown}}</td> @@ -183,7 +183,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <td>{{CompatVersionUnknown}}</td> </tr> <tr> - <td>Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}</td> + <td>Ииспользование на любых других свойствах работающих с типом {{cssxref("<image>")}}</td> <td>{{CompatNo}}</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatVersionUnknown}}</td> @@ -232,7 +232,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <th>Safari Mobile</th> </tr> <tr> - <td>Стандартное спользование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td> + <td>Стандартное использование (в {{cssxref("background")}} и {{cssxref("background-image")}})</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatGeckoMobile("1.9.2")}}{{property_prefix("-moz")}}<sup>[1]</sup><br> {{CompatGeckoMobile("16")}}</td> @@ -241,7 +241,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <td>{{CompatVersionUnknown}}</td> </tr> <tr> - <td>Использование в {{cssxref("border-image")}}</td> + <td>Ииспользование в {{cssxref("border-image")}}</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatGeckoMobile("29")}}</td> <td>{{CompatVersionUnknown}}</td> @@ -249,7 +249,7 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <td>{{CompatVersionUnknown}}</td> </tr> <tr> - <td>Использование на любых других свойствах работающих с типом {{cssxref("<image>")}}</td> + <td>Ииспользование на любых других свойствах работающих с типом {{cssxref("<image>")}}</td> <td>{{CompatNo}}</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatVersionUnknown}}</td> @@ -277,9 +277,9 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> </table> </div> -<p>[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могую быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> +<p>[1] Firefox 3.6 синтаксис - ранний реализованный вариант с префиксом. До Firefox 36, Gecko не применял градиенты на расширенное цветовое пространство, так как это приводило к неожиданному появлению серого оттенка при использовании прозрачности. Начиная с Firefox 42, версии градиентов с префиксом могут быть отключены установкой <code>layout.css.prefixes.gradients</code> to <code>false</code>.</p> -<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревшый вариант <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p> +<p>[2] Ранний синтаксис Webkit с префиксом. WebKit с версии 528 поддерживает устаревший вариант <a href="https://developer.apple.com/library/safari/documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW34"><code>-webkit-gradient(radial,…)</code></a>. Смотрите также <a href="https://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/Gradients/Gradient.html#//apple_ref/doc/uid/TP40008032-CH10-SW15">текущую поддержку</a> радиальных градиентов.</p> <p>[3] Internet Explorer от 5.5 до 9.0 поддерживают собственный фильтр <a href="http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx"><code>filter: progid:DXImageTransform.Microsoft.Gradient()</code></a>.</p> @@ -289,13 +289,13 @@ radial-gradient(circle at center, red 0, blue, green 100%)</pre> <ul> <li>Gecko имеет долгоиграющий баг благодаря которому значения вроде <code>radial-gradient(circle gold,red)</code> будут работать, даже несмотря на то, что пропущена запятая между <code>circle</code> и <code>gold</code> ({{bug(1383323)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизу в Firefox 57) исправляет этот баг.</li> - <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значени не валидно при использовании в radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизув Firefox 57) исправляет этот баг.</li> + <li>Также в Gecko выражения с {{cssxref("calc")}} считаются недействительными — значение не валидно при использовании в radial-gradient() ({{bug(1376019)}}). Новый parallel CSS движок от Firefox (также известный как <a href="https://wiki.mozilla.org/Quantum">Quantum CSS</a> или <a href="https://wiki.mozilla.org/Quantum/Stylo">Stylo</a>, планируемый к релизув Firefox 57) исправляет этот баг.</li> </ul> <h2 id="Смотрите_так_же">Смотрите так же</h2> <ul> - <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Использование CSS градиентов</a></li> + <li><a href="/en-US/docs/CSS/Using_CSS_gradients">Ииспользование CSS градиентов</a></li> <li>Другие варианты градиентов: {{cssxref("repeating-radial-gradient")}}, {{cssxref("linear-gradient")}}, {{cssxref("repeating-linear-gradient")}}</li> <li>{{cssxref("<image>")}}</li> </ul> diff --git a/files/ru/web/css/reference/index.html b/files/ru/web/css/reference/index.html index 2a32f7019f..507cc1fa72 100644 --- a/files/ru/web/css/reference/index.html +++ b/files/ru/web/css/reference/index.html @@ -10,7 +10,7 @@ translation_of: Web/CSS/Reference --- <p><span class="seoSummary">Данный <em>справочник по CSS</em> перечисляет все стандартные свойства, <a href="/ru/docs/Web/CSS/Pseudo-classes">псевдоклассы</a> и <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлементы</a>, <a href="/ru/docs/Web/CSS/At-rule">@-правила</a>, единицы измерения и селекторы <a href="/ru/docs/CSS">CSS</a> в алфавитном порядке. </span> Справочник позволит вам быстро найти подробную информацию о каждом из них. <span class="seoSummary">Он не только перечисляет свойства CSS 1 и CSS 2.1, но является и справочником по CSS3 со ссылками на описание каждого стандартизированного или уже стабилизированного свойства <a href="/ru/docs/Web/CSS/CSS3">CSS3</a>. Также включает в себя краткое руководство </span> <a href="https://developer.mozilla.org/ru/docs/Web/CSS/Reference$edit#DOM_CSS">DOM-CSS / CSSOM</a>.</p> -<p>Заметьте, что определения CSS-правил полностью (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">тексто-ориентированы</a>, в то время как определения правил DOM-CSS / CSSOM <a href="https://www.w3.org/TR/cssom/#introduction">объектно-ориентированы</a>.</p> +<p>Заметьте, что определения CSS-правил полностью (ASCII) <a href="https://www.w3.org/TR/css-syntax-3/#intro">текста-ориентированы</a>, в то время как определения правил DOM-CSS / CSSOM <a href="https://www.w3.org/TR/cssom/#introduction">объектно-ориентированы</a>.</p> <p>Смотрите также <a href="/ru/docs/Web/CSS/CSS_Reference/Mozilla_Extensions">Mozilla CSS Extensions</a> для Gecko-специфичных свойств с префиксом <code>-moz</code>; и <a href="/ru/docs/Web/CSS/CSS_Reference/Webkit_Extensions">WebKit CSS Extensions</a> для WebKit-специфичных свойств. Смотрите <a href="http://peter.sh/experiments/vendor-prefixed-css-property-overview/">Обзор CSS-префиксов для разных браузеров от Peter Beverloo</a> для всех свойств с префиксами.</p> @@ -57,7 +57,7 @@ div.menu-bar li:hover > ul { display: block; } <li><a href="/ru/docs/Web/CSS/Attribute_selectors">По атрибутам</a><code> [attr=value]</code></li> </ul> </li> - <li>Комбиционные + <li>Комбинационные <ul> <li><a href="/ru/docs/Web/CSS/Adjacent_sibling_selectors">смежный селектор</a> <code>A + B</code></li> <li><a href="/ru/docs/Web/CSS/General_sibling_selectors">следующего элемента</a> <code>A ~ B</code></li> diff --git a/files/ru/web/css/resolved_value/index.html b/files/ru/web/css/resolved_value/index.html index 8ea7300dd7..295f999c83 100644 --- a/files/ru/web/css/resolved_value/index.html +++ b/files/ru/web/css/resolved_value/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/resolved_value --- <div>{{cssref}}</div> -<p><strong>Решённое значение</strong> CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнильной информации.</p> +<p><strong>Решённое значение</strong> CSS свойства - значение, возвращаемое {{domxref("Window.getComputedStyle", "getComputedStyle()")}}. Для многих свойств, это {{cssxref("computed_value", "вычисленное значение") }}, но для старых свойств (включая {{cssxref("width")}} и {{cssxref("height")}}), это {{cssxref("used_value", "используемое значение")}}. Смотрите ссылку спецификации ниже для дополнительной информации.</p> <h2 id="Спецификации">Спецификации</h2> diff --git a/files/ru/web/css/revert/index.html b/files/ru/web/css/revert/index.html index 3b61c5ad38..86f135251a 100644 --- a/files/ru/web/css/revert/index.html +++ b/files/ru/web/css/revert/index.html @@ -5,16 +5,16 @@ translation_of: Web/CSS/revert --- <div>{{CSSRef}}</div> -<p><span class="seoSummary">Ключевое слово <strong><code>revert</code></strong> (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных).</span> Как следствие, оно сбрасывает свойство к значению по-умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово <strong><code>revert</code></strong> может быть применимо к любому свойству CSS, включая сокращённое свойство {{cssxref("all")}}.</p> +<p><span class="seoSummary">Ключевое слово <strong><code>revert</code></strong> (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных).</span> Как следствие, оно сбрасывает свойство к значению по умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово <strong><code>revert</code></strong> может быть применимо к любому свойству CSS, включая сокращённое свойство {{cssxref("all")}}.</p> <p>Ключевое слово <code>revert</code> полезно для изоляции встраиваемых виджетов или компонентов от стилей страницы, где они размещаются, особенно, когда оно используется совместно со свойством {{cssxref("all")}} .</p> -<p>В пользовательских стилях <code>revert</code> откатывает каскад и сбрасывает свойство к значению по-умолчанию, которое было установлено браузером.</p> +<p>В пользовательских стилях <code>revert</code> откатывает каскад и сбрасывает свойство к значению по умолчанию, которое было установлено браузером.</p> <div class="note"> -<p>Ключевое слово <code>revert</code> отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a>, которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по-умолчанию в зависимости от CSS селектора.</p> +<p>Ключевое слово <code>revert</code> отличается от {{cssxref("initial")}}, поэтому его не следует с ним путать. {{cssxref("initial")}} использует <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a>, которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по умолчанию в зависимости от CSS селектора.</p> -<p>Например, <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a> для свойства {{cssxref("display")}} — <code>inline</code>, тогда как браузер устанавливает значение по-умолчанию свойства {{cssxref("display")}} элемента {{HTMLElement("div")}} как <code>block</code>, а элемента {{HTMLElement("table")}} как <code>table</code>, и т.д</p> +<p>Например, <a href="/ru/docs/Web/CSS/initial_value">начальное значение</a> для свойства {{cssxref("display")}} — <code>inline</code>, тогда как браузер устанавливает значение по умолчанию свойства {{cssxref("display")}} элемента {{HTMLElement("div")}} как <code>block</code>, а элемента {{HTMLElement("table")}} как <code>table</code>, и т.д</p> </div> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/right/index.html b/files/ru/web/css/right/index.html index e39467180e..e825de23ab 100644 --- a/files/ru/web/css/right/index.html +++ b/files/ru/web/css/right/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/right <li>Когда задано <code>position: static</code> — свойство <code>right</code> <em>не имеет никакого эффекта</em>.</li> </ul> -<p>Когда заданы оба свойства {{cssxref("left")}} и <code>right</code>, и элемент не может растянуться, чтобы им соответсвовать, то позиционированние элемента is<em> overspecified</em>. В этом случае значение <code>left</code> имеет приоритет, when the container is left-to-right; и наоборот, значение <code>right</code> имеет приоритет, when the container is right-to-left.</p> +<p>Когда заданы оба свойства {{cssxref("left")}} и <code>right</code>, и элемент не может растянуться, чтобы им соответствовать, то позиционированние элемента is<em> overspecified</em>. В этом случае значение <code>left</code> имеет приоритет, when the container is left-to-right; и наоборот, значение <code>right</code> имеет приоритет, when the container is right-to-left.</p> <h2 id="Синтаксис" name="Синтаксис">Синтаксис</h2> diff --git a/files/ru/web/css/selector_list/index.html b/files/ru/web/css/selector_list/index.html index 3bf50932d0..dfa5948008 100644 --- a/files/ru/web/css/selector_list/index.html +++ b/files/ru/web/css/selector_list/index.html @@ -76,7 +76,7 @@ h3 { font-family: sans-serif }</pre> <tr> <td>{{SpecName("CSS4 Selectors", "#grouping", "Selector Lists")}}</td> <td>{{Spec2("CSS4 Selectors")}}</td> - <td>Переименованно в "selector list"</td> + <td>Переименовано в "selector list"</td> </tr> <tr> <td>{{SpecName('CSS1', '#grouping', 'grouping')}}</td> diff --git a/files/ru/web/css/specificity/index.html b/files/ru/web/css/specificity/index.html index 79e8065987..42adadbf3a 100644 --- a/files/ru/web/css/specificity/index.html +++ b/files/ru/web/css/specificity/index.html @@ -28,13 +28,13 @@ translation_of: Web/CSS/Specificity <ol start="0"> <li>селекторы типов элементов (например, <code>h1</code>) и псевдоэлементов (например, <code>::before</code>).</li> - <li>селекторы классов (например, <code>.example</code>), селекторы атрибутов (например, <code>[type="radio"]</code>) и псевдокласов (например, <code>:hover</code>).</li> + <li>селекторы классов (например, <code>.example</code>), селекторы атрибутов (например, <code>[type="radio"]</code>) и псевдоклассов (например, <code>:hover</code>).</li> <li>селекторы идентификаторов (например, <code>#example</code>).</li> </ol> <p>Универсальный селектор (<code>*</code>), комбинаторы (<code>+</code>, <code>></code>, <code>~</code>, '<code> </code>') и отрицающий псевдокласс (<code>:not()</code>) не влияют на специфичность. (Однако селекторы, объявленные <em>внутри</em> <code>:not()</code>, влияют)</p> -<p>Стили, обьявленные в элементе (например, <code>style="font-weight:bold"</code>), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.</p> +<p>Стили, объявленные в элементе (например, <code>style="font-weight:bold"</code>), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.</p> <h3 id="Важное_исключение_из_правил_-_!important">Важное исключение из правил - <code>!important</code></h3> @@ -234,7 +234,7 @@ h1 { <h2 id="Дополнительная_информация">Дополнительная информация</h2> <ul> - <li>Калькулятор специфичности: Интерактивный сайт, помогущий вам проверить и понять ваши собственные правила CSS - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li> + <li>Калькулятор специфичности: Интерактивный сайт, помогающий вам проверить и понять ваши собственные правила CSS - <a href="https://specificity.keegan.st/">https://specificity.keegan.st/</a></li> <li>Специфичность селекторов в CSS3 - <a class="external" href="http://www.w3.org/TR/selectors/#specificity" rel="freelink">http://www.w3.org/TR/selectors/#specificity</a></li> <li>{{ CSS_key_concepts() }}</li> </ul> diff --git a/files/ru/web/css/syntax/index.html b/files/ru/web/css/syntax/index.html index d2db52f659..ead0688e79 100644 --- a/files/ru/web/css/syntax/index.html +++ b/files/ru/web/css/syntax/index.html @@ -17,7 +17,7 @@ original_slug: Web/CSS/Синтаксис <h2 id="Объявления_CSS">Объявления CSS</h2> -<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответсвий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> +<p>Задание CSS свойствам определенных значений — это основная функция CSS. Пара свойство-значение называется <em>объявлением</em>. Работа CSS движка заключается в поиске соответствий между объявлениями стилей и элементом на странице, чтобы правильно отобразить и форматировать этот элемент.</p> <p>И свойство, и значения регистрозависимы. Пара свойство-значение разделяется двоеточием, '<code>:</code>' (<code>U+003A COLON</code>), а пробелы до, между и после свойства или значения игнорируются.</p> diff --git a/files/ru/web/css/text-shadow/index.html b/files/ru/web/css/text-shadow/index.html index d78071246f..82ff55c57e 100644 --- a/files/ru/web/css/text-shadow/index.html +++ b/files/ru/web/css/text-shadow/index.html @@ -47,9 +47,9 @@ text-shadow: unset; <dl> <dt>{{cssxref("<цвет>")}}</dt> - <dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется опредлить значение цвета явно.</dd> + <dd>Необязательный. Цвет тени. Параметр может быть определён как до, так и после значений смещений. Если значение не задано, то его цвет будет определяться браузером пользователя, поэтому, для сохранения согласованности в отображении в браузерах, рекомендуется определить значение цвета явно.</dd> <dt><code><смещение-x> <смещение-y></code></dt> - <dd>Обязательные. Эти величины {{cssxref("<длина>")}} задают расстояние тени от текста. <code><смещение-x></code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code><смещение-y></code> определяет вертикальное растояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code><радиус-размытия></code>.</dd> + <dd>Обязательные. Эти величины {{cssxref("<длина>")}} задают расстояние тени от текста. <code><смещение-x></code> определяет горизонтальное расстояние; отрицательное значение размещает тень левее от текста. <code><смещение-y></code> определяет вертикальное расстояние; отрицательное значение размещает тень выше текста. Если оба значения заданы в <code>0</code>, тень будет располагаться прямо за текстом, она может быть видна из-за эффекта <code><радиус-размытия></code>.</dd> <dt><code><радиус-размытия></code></dt> <dd>Необязательный. Это величина {{cssxref("<длина>")}}. Чем больше значение, тем сильнее задаётся размытие; тень становится шире и светлее. Значение по умолчанию <code>0</code>, в случае когда параметр не определён.</dd> </dl> diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html index bd58a6250f..f45e6b2ef3 100644 --- a/files/ru/web/css/text-size-adjust/index.html +++ b/files/ru/web/css/text-size-adjust/index.html @@ -2,7 +2,7 @@ title: text-size-adjust slug: Web/CSS/text-size-adjust tags: - - Эксперементально + - Экспериментально translation_of: Web/CSS/text-size-adjust --- <div>{{CSSRef}}{{SeeCompatTable}}</div> diff --git a/files/ru/web/css/time/index.html b/files/ru/web/css/time/index.html index c300093e72..6d15f3733d 100644 --- a/files/ru/web/css/time/index.html +++ b/files/ru/web/css/time/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/time --- <div>{{CSSRef}}</div> -<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code><time></code></strong> представляет значение времени, выраженное в секундах или милисекундах. Он используется в {{cssxref("animation")}}, {{cssxref("transition")}}, и связанных свойствах.</p> +<p><a href="https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Types">Тип данных</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code><time></code></strong> представляет значение времени, выраженное в секундах или миллисекундах. Он используется в {{cssxref("animation")}}, {{cssxref("transition")}}, и связанных свойствах.</p> <h2 id="Синтаксис">Синтаксис</h2> @@ -25,7 +25,7 @@ translation_of: Web/CSS/time <dt><strong><code id="s">s</code></strong></dt> <dd>Представляет время в секундах. Примеры: <code>0s</code>, <code>1.5s</code>, <code>-60s</code>.</dd> <dt><strong><code id="ms">ms</code></strong></dt> - <dd>Представляет время в милисекундах. Примеры: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd> + <dd>Представляет время в миллисекундах. Примеры: <code>0ms</code>, <code>150.25ms</code>, <code>-60000ms</code>.</dd> </dl> <div class="note"> diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html index 71d94f55e7..d8501cca91 100644 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ b/files/ru/web/css/transform-function/rotate()/index.html @@ -33,8 +33,8 @@ translation_of: Web/CSS/transform-function/rotate() <tr> <th scope="col">Декартовы координаты на ℝ<sup>2</sup></th> <th scope="col">Однородные координаты на ℝℙ<sup>2</sup></th> - <th scope="col">Декартовы координаты наℝ<sup>3</sup></th> - <th scope="col">Однородные координаты наℝℙ<sup>3</sup></th> + <th scope="col">Декартовы координаты на ℝ<sup>3</sup></th> + <th scope="col">Однородные координаты на ℝℙ<sup>3</sup></th> </tr> </thead> <tbody> diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index 5558f3f69f..aeadb96e60 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/transform-function/rotate3d() --- <div>{{CSSRef}}</div> -<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращяя его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> +<div>Функция <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>rotate3d()</code> </strong>трансформирует элемент без деформации, вращая его в трехмерном пространстве вокруг зафиксированной оси. Её результатом является тип {{cssxref ("<transform-function>")}}.</div> <div> </div> diff --git a/files/ru/web/css/transform-function/scale3d()/index.html b/files/ru/web/css/transform-function/scale3d()/index.html index 7caca80cca..acfcf77edf 100644 --- a/files/ru/web/css/transform-function/scale3d()/index.html +++ b/files/ru/web/css/transform-function/scale3d()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/transform-function/scale3d() --- <div>{{CSSRef}}</div> -<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодяря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p> +<p><code>scale3d()</code> CSS функция изменяет размер элемента. Благодаря величине масштабирования определенной вектором, может изменять различные размеры в разных масштабах.</p> <p>Это преобразование характеризуется вектором, координаты которого определяют, сколько масштабирования выполняется в каждом направлении. Если все три координаты вектора равны, масштабирование равномерно или изотропно, а форма элемента сохраняется. В этом случае функция масштабирования определяет гомотетическое преобразование.</p> diff --git a/files/ru/web/css/transition-duration/index.html b/files/ru/web/css/transition-duration/index.html index cc71428846..30b0f8175e 100644 --- a/files/ru/web/css/transition-duration/index.html +++ b/files/ru/web/css/transition-duration/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/transition-duration --- <div>{{CSSRef}}</div> -<p>Свойство <strong><code>transition-duration</code></strong> определяет продолжительность выполнения анимации. Значение по-умолчанию равняется <code>0s</code>, т.е. отстутствие анимации.</p> +<p>Свойство <strong><code>transition-duration</code></strong> определяет продолжительность выполнения анимации. Значение по умолчанию равняется <code>0s</code>, т.е. отсутствие анимации.</p> <p>{{EmbedInteractiveExample("pages/css/transition-duration.html")}}</p> diff --git a/files/ru/web/css/used_value/index.html b/files/ru/web/css/used_value/index.html index 07cc2213ee..2467369481 100644 --- a/files/ru/web/css/used_value/index.html +++ b/files/ru/web/css/used_value/index.html @@ -16,7 +16,7 @@ translation_of: Web/CSS/used_value <p>После того как {{glossary("user agent")}} закончил свои расчеты каждое свойство CSS имеет своё значение. Используемые значения (например, {{cssxref("width")}}, {{cssxref("line-height")}}) в пикселях. Используемые значения сокращённых свойств (например, {{cssxref("background")}}) согласуются с теми из свойств компонентов (например, {{cssxref("background-color")}} или {{cssxref("background-size")}}) и с {{cssxref("position")}} и {{cssxref("float")}}.</p> <div class="blockIndicator note"> -<p><strong>Змечание</strong>: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">вычесленным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p> +<p><strong>Замечание</strong>: {{domxref("Window.getComputedStyle", "getComputedStyle()")}} DOM API возвращает <a href="/ru/docs/">решённое значение</a>, которое может быть <a href="/ru/docs/">численным значением</a> или <a href="/ru/docs/">используемым значением</a>, в зависимости от свойства.</p> </div> <h2 id="Пример">Пример</h2> diff --git a/files/ru/web/css/using_css_custom_properties/index.html b/files/ru/web/css/using_css_custom_properties/index.html index 905cbffe8d..829761ba71 100644 --- a/files/ru/web/css/using_css_custom_properties/index.html +++ b/files/ru/web/css/using_css_custom_properties/index.html @@ -199,7 +199,7 @@ translation_of: Web/CSS/Using_CSS_custom_properties }</code></pre> <div class="note"> -<p>В замещаемых значениях можно использовать запятые по аналогии с <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательскими свойствами</a>. Например, var(--foo, red, blue) опеределит red, blue как замещающее значение (от первой запятой и до конца определения функции)</p> +<p>В замещаемых значениях можно использовать запятые по аналогии с <a href="https://www.w3.org/TR/css-variables/#custom-property">пользовательскими свойствами</a>. Например, var(--foo, red, blue) определить red, blue как замещающее значение (от первой запятой и до конца определения функции)</p> </div> <div class="note"> diff --git a/files/ru/web/css/visibility/index.html b/files/ru/web/css/visibility/index.html index 69a510bb29..7889193f67 100644 --- a/files/ru/web/css/visibility/index.html +++ b/files/ru/web/css/visibility/index.html @@ -56,7 +56,7 @@ visibility: unset; <h2 id="Интерполяция">Интерполяция</h2> -<p>Значения видимости изменяются между <em>видим</em> и <em>не видим</em>. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений <code>visible</code>, интерполируется как дискретный шаг, где значения временной функции от <code>0</code> до <code>1</code> для <code>visible</code> и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции <code>cubic-bezier()</code> cо значениями вне [0, 1]) ближе к конечной точке.</p> +<p>Значения видимости изменяются между <em>видим</em> и <em>не видим</em>. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений <code>visible</code>, интерполируется как дискретный шаг, где значения временной функции от <code>0</code> до <code>1</code> для <code>visible</code> и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции <code>cubic-bezier()</code> со значениями вне [0, 1]) ближе к конечной точке.</p> <h2 id="Примеры">Примеры</h2> @@ -155,7 +155,7 @@ td { <tr> <td>{{SpecName('CSS3 Transitions', '#animatable-css', 'visibility')}}</td> <td>{{Spec2('CSS3 Transitions')}}</td> - <td>Определяет <code>visibility</code> как анимирумое.</td> + <td>Определяет <code>visibility</code> как анимируемое.</td> </tr> <tr> <td>{{SpecName('CSS2.1', 'visufx.html#visibility', 'visibility')}}</td> diff --git a/files/ru/web/css/visual_formatting_model/index.html b/files/ru/web/css/visual_formatting_model/index.html index b7cc6050f3..9faa4e62f5 100644 --- a/files/ru/web/css/visual_formatting_model/index.html +++ b/files/ru/web/css/visual_formatting_model/index.html @@ -18,19 +18,19 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <li>другой внешней информацией.</li> </ul> -<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполенинем</em> (<em>overflow).</em></p> +<p>Бокс отображается относительно краев <em>содержащего его блока. </em>Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоев, выходящих за пределы своих содержащих блоков, называется <em>переполнением</em> (<em>overflow).</em></p> <h2 id="Генерация_бокса">Генерация бокса</h2> <p>Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS {{ cssxref("display") }}.</p> -<h3 id="Блочные_эклементы_и_блок-боксы">Блочные эклементы и блок-боксы</h3> +<h3 id="Блочные_элементы_и_блок-боксы">Блочные элементы и блок-боксы</h3> <p>Говорят, что элемент является блочным, когда вычисленное значение его CSS свойства {{ cssxref("display") }} равно: <code>block</code>, <code>list-item</code>, или <code>table</code>. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).</p> -<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как миниум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p> +<p>Каждый элемент блочного уровня участвует в <a href="/ru/docs/CSS/block_formatting_context" title="block formatting context">контексте блочного форматирования</a>. Каждый элемент блочного уровня генерирует как минимум один блок-бокс, названный <em>главным блок-боксом</em>. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.</p> -<p>Главный блок-бокс содержит сгенериованные боксы-потомки и сгенериованный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p> +<p>Главный блок-бокс содержит сгенерированные боксы-потомки и сгенерированный контекст. Он так же будет боксом, участвующем в <a href="/en-US/docs/CSS/Positioning_scheme" title="CSS/Positioning scheme">схеме позиционирования</a>.</p> <p><img alt="venn_blocks.png" class="internal lwrap" src="/@api/deki/files/5995/=venn_blocks.png" style="float: left;">Элемент блочного уровня так же может быть блоком-контейнером. Блок-контейнер - это блок, который содержит либо только другие элементы блочного уровня, либо создаёт <a href="/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контекст инлайнового форматирования</a> и, таким образом, содержит только инлайновые элементы.</p> @@ -40,7 +40,7 @@ original_slug: Web/Guide/CSS/Visual_formatting_model <h4 id="Анонимные_блок-боксы">Анонимные блок-боксы</h4> -<p>В некоторых случаях алгоритм визуального форматирования вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то проименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p> +<p>В некоторых случаях алгоритм визуального форматирования вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то переименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют <em>анонимными</em>.</p> <p>Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS свойства для них будут иметь значение <code>inherit</code>, а все ненаследуемые свойства будут иметь значение <code>initial</code>.</p> @@ -86,12 +86,12 @@ followed by more inline text.</code></pre> <h3 id="Элементы_инлайн-уровня_и_инлайн-боксы">Элементы инлайн-уровня и инлайн-боксы</h3> -<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они распологаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p> +<p>Элементы, которые называются <em>элементами инлайн-уровня</em> - это элементы, у которых вычисленное значение CSS свойства {{ cssxref("display") }} установлено в : <code>inline</code>, <code>inline-block</code> или <code>inline-table</code>. Визуально они не представляют собой какие-то отдельные блоки, но они они располагаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.</p> <p><img alt="venn_inlines.png" class="internal lwrap" src="https://developer.mozilla.org/@api/deki/files/6008/=venn_inlines.png" style="float: left;"></p> <div class="warning"> -<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него (it could be a mathematical superset), потому что в спецификации сказано: "Элементв инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p> +<p>Эта диаграмма использует устаревшую терминологию; см. примечания ниже. К тому же она некорректна, потому что жёлтый эллипс справа по определению должен быть изображён одинаковым по размеру с эллипсом слева или больше него (it could be a mathematical superset), потому что в спецификации сказано: "Элемент инлайн-уровня генерируют боксы инлайн-уровня, участвующие в форматировании инлайн-уровня", см. CSS 2.2, глава 9.2.2</p> </div> <p>Элементы инлайн-уровня создают <em>боксы инлайн-уровня</em>, которые определены как боксы, участвующие в <a href="https://developer.mozilla.org/en-US/docs/CSS/Inline_formatting_context" title="CSS/Inline formatting context">контексте форматирования инлайн-уровня</a>. <em>Inline boxes</em> are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with <code>display:inline</code>. Inline-level boxes, whose contents do not participate in an inline formatting context, are called <em>atomic inline-level boxes</em>. These boxes, generated by replaced inline-level elements or by elements with a calculated {{ cssxref("display") }} value of <code>inline-block</code> or <code>inline-table</code>, are never split into several boxes, as is possible with inline boxes.</p> diff --git a/files/ru/web/css/width/index.html b/files/ru/web/css/width/index.html index e72da72aae..487f061001 100644 --- a/files/ru/web/css/width/index.html +++ b/files/ru/web/css/width/index.html @@ -9,7 +9,7 @@ translation_of: Web/CSS/width <div>{{EmbedInteractiveExample("pages/css/width.html")}}</div> -<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пулл-реквест.</p> +<p class="hidden">Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> и отправьте нам пул-реквест.</p> <p>Свойства {{cssxref("min-width")}} и {{cssxref("max-width")}} перекрывают {{cssxref("width")}}.</p> @@ -196,7 +196,7 @@ width: unset; <h2 id="Поддержка_браузерами">Поддержка браузерами</h2> -<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пулл-реквест.</div> +<div class="hidden">Для создания таблицы совместимости из структурированных данных воспользуйтесь ресурсом <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>. Если вы хотите внести свой вклад в данные, пожалуйста, проверьте данные и отправьте нам пул-реквест.</div> <p>{{Compat("css.properties.width")}}</p> diff --git a/files/ru/web/css/will-change/index.html b/files/ru/web/css/will-change/index.html index a6b0030a21..916c5d4263 100644 --- a/files/ru/web/css/will-change/index.html +++ b/files/ru/web/css/will-change/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/will-change --- <p>{{ CSSRef() }}{{SeeCompatTable}}</p> -<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code style="font-style: normal;">will-change</code> предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента<span class="seoSummary">, таким образом браузер может настроить соответсвующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. </span></p> +<p><a href="/en-US/docs/Web/CSS">CSS</a> свойство <code style="font-style: normal;">will-change</code> предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента<span class="seoSummary">, таким образом браузер может настроить соответствующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся. </span></p> <pre><code>/* Keyword values */ will-change: auto; @@ -32,7 +32,7 @@ will-change: unset;</code></pre> <p><em>Используйте умеренно.</em> Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление <code>will-change</code> прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать <code>will-change</code> используя скрипт до и после того как произошли изменения.</p> </li> <li> - <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Черезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p> + <p><em>Не применяйте will-change к элементам для выполнения преждевременной оптимизации</em>. Если ваша страница хорошо отрабатывается, не применяйте <code>will-change</code> свойство к элементу только чтобы выжать немного больше скорости. <code>will-change</code> предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование <code>will-change</code> приведет к излишнему потреблению памяти и вызовет более тяжелый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведет к ухудшению производительности.</p> </li> <li> <p id="Give_it_sufficient_time_to_work"><em>Дайте ему достаточно времени, чтобы работать</em>. Это свойство дает автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.</p> @@ -58,7 +58,7 @@ will-change: unset;</code></pre> <dt><code>contents</code></dt> <dd>Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.</dd> <dt>{{cssxref("custom-ident", "<custom-ident>")}}</dt> - <dd>Указывает, что автор ожидает анимацию или измение свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> + <dd>Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращенная запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращенная запись. Это не может быть одним из следующих значений: <code>unset</code>, <code>initial</code>, <code>inherit</code>, <code>will-change</code>, <code>auto</code>, <code>scroll-position</code>, или <code>contents</code>. </dd> </dl> <h2 id="Примеры">Примеры</h2> @@ -86,7 +86,7 @@ function removeHint() { this.style.willChange = 'auto'; }</pre> -<p>Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или перезентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.</p> +<p>Однако может быть целесообразно включить will-change в вашу таблицу стилей для приложения, в котором страница переворачивается при нажатии клавиши, например альбом или презентация, где страницы большие и сложные. Это позволит браузеру заранее подготовить переход и позволит быстро переключаться между страницами, как только будет нажата клавиша.</p> <pre class="brush: css">.slide { will-change: transform; diff --git a/files/ru/web/css/word-break/index.html b/files/ru/web/css/word-break/index.html index 0d5acf1fc4..e6d9699fb7 100644 --- a/files/ru/web/css/word-break/index.html +++ b/files/ru/web/css/word-break/index.html @@ -37,7 +37,7 @@ word-break: unset; <dt><code>break-all</code></dt> <dd>При превышении границ блока, перевод строки будет вставлен между любыми двумя символами (за исключением текста на китайском/японском/корейском языке).</dd> <dt><code>keep-all</code></dt> - <dd>Перевод строки не будет испольован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (<code>normal</code>).</dd> + <dd>Перевод строки не будет использован в тексте на китайском/японском/корейском языке. Для текста на других языках будет применено поведение по умолчанию (<code>normal</code>).</dd> <dt><code>break-word</code> {{Non-standard_Inline}}</dt> <dd>При превышении границ блока, обычно остающиеся целыми слова, могут быть разбиты в произвольном месте, если не будет найдено более подходящее для переноса строки место.</dd> </dl> diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html index d99a55ba18..403486a8b3 100644 --- a/files/ru/web/css/z-index/index.html +++ b/files/ru/web/css/z-index/index.html @@ -94,7 +94,7 @@ z-index: unset; <p>{{ EmbedLiveSample('Examples', '550', '200', '') }}</p> -<h2 id="Спецфикации">Спецфикации</h2> +<h2 id="Спецификации">Спецификации</h2> <table class="standard-table"> <thead> |