diff options
Diffstat (limited to 'files/ru/web/css')
55 files changed, 314 insertions, 314 deletions
diff --git a/files/ru/web/css/_colon_any-link/index.html b/files/ru/web/css/_colon_any-link/index.html index 2ad3e71f57..824f55af0e 100644 --- a/files/ru/web/css/_colon_any-link/index.html +++ b/files/ru/web/css/_colon_any-link/index.html @@ -18,7 +18,7 @@ translation_of: 'Web/CSS/:any-link' <p>Селектор <a href="/en-US/docs/Web/CSS/Pseudo-classes">псевдокласса</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:any-link</code></strong> представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам {{HTMLElement("a")}}, {{HTMLElement("area")}}, или {{HTMLElement("link")}}, которые имеют атрибут <code>href</code>. Таким образом, он соответствует всем элементам, которые используют {{cssxref(":link")}} или {{cssxref(":visited")}}.</p> -<pre class="brush: css no-line-numbers language-css notranslate"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ +<pre class="brush: css no-line-numbers language-css"><code class="language-css"><span class="selector token"><span class="pseudo-class token">/* Выбирает любой элемент, который будет соответствовать:link или :visited */ :any-link</span> </span><span class="punctuation token">{</span> <span class="property token">color</span><span class="punctuation token">:</span> green<span class="punctuation token">;</span> <span class="punctuation token">}</span></code></pre> @@ -31,13 +31,13 @@ translation_of: 'Web/CSS/:any-link' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><a href="https://example.com">External link</a><br> +<pre class="brush: html"><a href="https://example.com">External link</a><br> <a href="#">Internal target link</a><br> <a>Placeholder link (won't get styled)</a></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">a:any-link { +<pre class="brush: css">a:any-link { border: 1px solid blue; color: orange; } diff --git a/files/ru/web/css/_colon_empty/index.html b/files/ru/web/css/_colon_empty/index.html index b922f9a29c..de1b0fc481 100644 --- a/files/ru/web/css/_colon_empty/index.html +++ b/files/ru/web/css/_colon_empty/index.html @@ -18,12 +18,12 @@ translation_of: 'Web/CSS/:empty' <h2 id="Syntax">Синтаксис</h2> -<pre class="syntaxbox notranslate"><element>:empty { <em>/* стили</em> */ } +<pre class="syntaxbox"><element>:empty { <em>/* стили</em> */ } </pre> <h2 id="Examples">Примеры</h2> -<pre class="brush: css notranslate">.box { +<pre class="brush: css">.box { background: red; height: 200px; width: 200px; @@ -34,7 +34,7 @@ translation_of: 'Web/CSS/:empty' } </pre> -<pre class="brush: html notranslate"><div class="box"><!-- Я буду лаймовым --></div> +<pre class="brush: html"><div class="box"><!-- Я буду лаймовым --></div> <div class="box">Я буду красным</div> <div class="box"> <!-- Я буду красным, так как перед комментарием стоят пробелы --> diff --git a/files/ru/web/css/_colon_first/index.html b/files/ru/web/css/_colon_first/index.html index 82f0a46dbc..5f83d32cd6 100644 --- a/files/ru/web/css/_colon_first/index.html +++ b/files/ru/web/css/_colon_first/index.html @@ -12,7 +12,7 @@ translation_of: 'Web/CSS/:first' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/%D0%9F%D1%81%D0%B5%D0%B2%D0%B4%D0%BE-%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%8B">псевдокласс</a> <strong><code>:first</code></strong> используется с @-правилом {{cssxref("@page")}}, представляя первую страницу документа при печати.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает первую страницу при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает первую страницу при печати */ @page :first { margin-left: 50%; margin-top: 50%; @@ -30,14 +30,14 @@ translation_of: 'Web/CSS/:first' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Первая страница.</p> +<pre class="brush: html"><p>Первая страница.</p> <p>Вторая страница.</p> <button>Напечатать</button> </pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">@page :first { +<pre class="brush: css">@page :first { margin-left: 50%; margin-top: 50%; } @@ -49,7 +49,7 @@ p { <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">document.querySelector("button").onclick = function () { +<pre class="brush: js">document.querySelector("button").onclick = function () { window.print(); } </pre> diff --git a/files/ru/web/css/_colon_focus-visible/index.html b/files/ru/web/css/_colon_focus-visible/index.html index 0947a99d1e..6a60885ae1 100644 --- a/files/ru/web/css/_colon_focus-visible/index.html +++ b/files/ru/web/css/_colon_focus-visible/index.html @@ -19,14 +19,14 @@ translation_of: 'Web/CSS/:focus-visible' <p>В этом примере селектор <code>:focus-visible</code> использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью <code>:focus</code>.</p> -<pre class="brush: html notranslate"><input value="Default styles"><br> +<pre class="brush: html"><input value="Default styles"><br> <button>Default styles</button><br> <input class="focus-only" value=":focus only"><br> <button class="focus-only">:focus only</button><br> <input class="focus-visible-only" value=":focus-visible only"><br> <button class="focus-visible-only">:focus-visible only</button></pre> -<pre class="brush: css highlight[9] notranslate">input, button { +<pre class="brush: css highlight[9]">input, button { margin: 10px; } @@ -45,9 +45,9 @@ translation_of: 'Web/CSS/:focus-visible' <p>Пользовательский элемент управления, такой как кнопка <a href="/en-US/docs/User:Andreas_Wuest/Custom_Elements">настраиваемого элемента</a>, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как {{htmlelement ("button")}}.</p> -<pre class="brush: html notranslate"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> +<pre class="brush: html"><custom-button tabindex="0" role="button">Click Me</custom-button></pre> -<pre class="brush: css highlight[13, 19] notranslate">custom-button { +<pre class="brush: css highlight[13, 19]">custom-button { display: inline-block; margin: 10px; } diff --git a/files/ru/web/css/_colon_focus-within/index.html b/files/ru/web/css/_colon_focus-within/index.html index 1a8c179fab..a60adff99c 100644 --- a/files/ru/web/css/_colon_focus-within/index.html +++ b/files/ru/web/css/_colon_focus-within/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/:focus-within' <p><a href="/en-US/docs/Web/CSS">CSS</a> <a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдо-класс</a> <strong><code>:focus-within</code></strong> соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу {{CSSxRef(":focus")}} либо имеет потомка, который соответствует <code>:focus</code>. (Включая потомков в <a href="/en-US/docs/Web/Web_Components/Shadow_DOM">shadow trees</a>.)</p> -<pre class="brush: css no-line-numbers notranslate">/* Выделяет <div> когда один из его потомков находится в фокусе */ +<pre class="brush: css no-line-numbers">/* Выделяет <div> когда один из его потомков находится в фокусе */ div:focus-within { background: cyan; }</pre> @@ -24,7 +24,7 @@ div:focus-within { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><p>Try typing into this form.</p> +<pre class="brush: html"><p>Try typing into this form.</p> <form> <label for="given_name">Given Name:</label> @@ -36,7 +36,7 @@ div:focus-within { <h3 id="CSS">CSS</h3> -<pre class="brush: css highlight[7] notranslate">form { +<pre class="brush: css highlight[7]">form { border: 1px solid; color: gray; padding: 4px; diff --git a/files/ru/web/css/_colon_host()/index.html b/files/ru/web/css/_colon_host()/index.html index 19830a0c9c..b285765913 100644 --- a/files/ru/web/css/_colon_host()/index.html +++ b/files/ru/web/css/_colon_host()/index.html @@ -15,7 +15,7 @@ translation_of: 'Web/CSS/:host()' <p><strong>Примечание</strong>: Псевдокласс не имеет эффекта вне shadow DOM.</p> </div> -<pre class="brush: css; no-line-numbers notranslate">/* Выбирает хоста shadow root, только +<pre class="brush: css; no-line-numbers">/* Выбирает хоста shadow root, только если он соответствует аргументу селектора */ :host(.special-custom-element) { font-weight: bold; @@ -34,11 +34,11 @@ translation_of: 'Web/CSS/:host()' <p>В этом примере у нас есть простой пользовательский элемент — <code><context-span></code> — который мы оборачиваем вокруг текста:</p> -<pre class="brush: html; notranslate"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> +<pre class="brush: html;"><h1>Host selectors <a href="#"><context-span>example</context-span></a></h1></pre> <p>Внутри конструктора элемента мы создаём элементы <code>style</code> и <code>span</code>, заполняем <code>span</code> контентом пользовательского элемента и заполняем элемент <code>style</code> CSS-правилами:</p> -<pre class="brush: js; notranslate">let style = document.createElement('style'); +<pre class="brush: js;">let style = document.createElement('style'); let span = document.createElement('span'); span.textContent = this.textContent; diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html index e77d87f70c..e74aaf3846 100644 --- a/files/ru/web/css/_colon_is/index.html +++ b/files/ru/web/css/_colon_is/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:is' <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">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ +<pre class="brush: css no-line-numbers">/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */ :is(header, main, footer) p:hover { color: red; cursor: pointer; @@ -52,7 +52,7 @@ footer p:hover { <h3 id="Кроссбраузерный_пример">Кроссбраузерный пример</h3> -<pre class="brush: html notranslate"><header> +<pre class="brush: html"><header> <p>Это мой параграф в шапке</p> </header> @@ -67,7 +67,7 @@ footer p:hover { <p>Это мой параграф в подвале</p> </footer></pre> -<pre class="brush: css notranslate">:-webkit-any(header, main, footer) p:hover { +<pre class="brush: css">:-webkit-any(header, main, footer) p:hover { color: red; cursor: pointer; } @@ -88,7 +88,7 @@ footer p:hover { } </pre> -<pre class="brush: js notranslate">let matchedItems; +<pre class="brush: js">let matchedItems; try { matchedItems = document.querySelectorAll(':is(header, main, footer) p'); @@ -122,7 +122,7 @@ function applyHandler(elem) { <p>Псевдо-класс <code>:is()</code> может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ ol ol ul, ol ul ul, ol menu ul, ol dir ul, ol ol menu, ol ul menu, ol menu menu, ol dir menu, ol ol dir, ol ul dir, ol menu dir, ol dir dir, @@ -141,7 +141,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>... можно заменить на:</p> -<pre class="brush: css notranslate">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ +<pre class="brush: css">/* 3-уровневые (или более) неупорядоченные списки используют свойство square */ :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) ul, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) menu, :is(ol, ul, menu, dir) :is(ol, ul, menu, dir) dir { @@ -154,7 +154,7 @@ dir ol dir, dir ul dir, dir menu dir, dir dir dir { <p>К примеру, без <code>:is()</code>, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -175,7 +175,7 @@ nav section h1, nav article h1, nav aside h1, nav nav h1 { <p>Используя <code>:is()</code>, как видно, это гораздо легче:</p> -<pre class="brush: css notranslate">/* Уровень 0 */ +<pre class="brush: css">/* Уровень 0 */ h1 { font-size: 30px; } @@ -199,13 +199,13 @@ h1 { <p>В отличие от <a href="/ru/docs/Web/CSS/Selector_list">списка селекторов</a>, псевдокласс <code>:is()</code> не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.</p> -<pre class="brush: css notranslate">:is(:valid, :unsupported) { +<pre class="brush: css">:is(:valid, :unsupported) { ... }</pre> <p>Будет по прежнему определяться правильно и соответствовать <code>:valid</code> даже в браузерах, которые не поддерживают <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html index c435be2554..2cfcabf12b 100644 --- a/files/ru/web/css/_colon_left/index.html +++ b/files/ru/web/css/_colon_left/index.html @@ -10,7 +10,7 @@ translation_of: 'Web/CSS/:left' <p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Псевдокласс</a> <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:left</code></strong> используется с <a href="/en-US/docs/Web/CSS/At-rule">at-правилом</a> {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает все левые страницы при печати */ +<pre class="brush: css no-line-numbers">/* Выбирает все левые страницы при печати */ @page :left { margin: 2in 3in; }</pre> @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/:left' <h3 id="Выставляем_отступы_для_левых_страниц">Выставляем отступы для левых страниц</h3> -<pre class="brush: css notranslate">@page :left { +<pre class="brush: css">@page :left { margin: 2in 3in; } </pre> diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html index 631182a560..e47bedbdad 100644 --- a/files/ru/web/css/_colon_where/index.html +++ b/files/ru/web/css/_colon_where/index.html @@ -13,7 +13,7 @@ translation_of: 'Web/CSS/:where' <div></div> -<pre class="brush: css notranslate"><code>/* Выбирает любой параграф внутри header, main +<pre class="brush: css"><code>/* Выбирает любой параграф внутри header, main или footer на который наведён курсор мыши */ :where(header, main, footer) p:hover { color: red; @@ -36,13 +36,13 @@ footer p:hover { <p>При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании <code>:is()</code> или <code>:where()</code> действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.</p> -<pre class="brush: css notranslate">:where(:valid, :unsupported) { +<pre class="brush: css">:where(:valid, :unsupported) { ... }</pre> <p>Пример выше будет успешно распарсен и для <code>:valid</code> будут применены CSS-правила, даже если в браузере не поддерживается <code>:unsupported</code>, в то время как:</p> -<pre class="brush: css notranslate">:valid, :unsupported { +<pre class="brush: css">:valid, :unsupported { ... }</pre> @@ -56,7 +56,7 @@ footer p:hover { <p>Возьмём следующий HTML-код:</p> -<pre class="brush: html notranslate"><article> +<pre class="brush: html"><article> <h2>:is()-styled links</h2> <section class="is-styling"> <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>. @@ -90,7 +90,7 @@ footer p:hover { <p>Теперь при помощи псевдоклассов <code>:is()</code> и <code>:where()</code> зададим цвет для ссылок в простой форме, как в примере ниже:</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { font-family: sans-serif; font-size: 150%; } @@ -105,7 +105,7 @@ footer p:hover { <p>Что если позже мы захотим переопределить цвет ссылок в <code>footer</code>'ах используя простой селектор?</p> -<pre class="brush: css notranslate">footer a { +<pre class="brush: css">footer a { color: blue; }</pre> diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html index 4ff78d9a48..fb8fd111a9 100644 --- a/files/ru/web/css/_doublecolon_cue/index.html +++ b/files/ru/web/css/_doublecolon_cue/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::cue' <p><span class="seoSummary"><a href="/ru/docs/Web/CSS/Pseudo-elements">Псевдоэлемент</a> <a href="/ru/docs/Web/CSS">CSS</a> <strong><code>::cue</code></strong> соответствует репликам <a href="/en-US/docs/Web/API/WebVTT_API">WebVTT</a> в выбранном элементе. Он может быть использован для задания <a href="/docs/Web/API/WebVTT_API#Styling_WebTT_cues">стилей титров и других реплик</a> в медиа с VTT треками.</span></p> -<pre class="brush: css no-line-numbers notranslate">::cue { +<pre class="brush: css no-line-numbers">::cue { color: yellow; font-weight: bold; }</pre> @@ -41,7 +41,7 @@ translation_of: 'Web/CSS/::cue' <p>Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.</p> -<pre class="brush: css notranslate">::cue { +<pre class="brush: css">::cue { color: #fff; background-color: rgba(0, 0, 0, 0.6); }</pre> diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html index c64a28eb84..2a7a57109b 100644 --- a/files/ru/web/css/_doublecolon_grammar-error/index.html +++ b/files/ru/web/css/_doublecolon_grammar-error/index.html @@ -29,7 +29,7 @@ translation_of: 'Web/CSS/::grammar-error' <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">::grammar-error</pre> +<pre class="syntaxbox">::grammar-error</pre> <h2 id="Примеры">Примеры</h2> @@ -39,11 +39,11 @@ translation_of: 'Web/CSS/::grammar-error' <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>My friends is coming to the party tonight.</p></pre> +<pre class="brush: html"><p>My friends is coming to the party tonight.</p></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">::grammar-error { +<pre class="brush: css">::grammar-error { text-decoration: underline red; color: red; }</pre> diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html index 37caf3ec01..767ad0a2d7 100644 --- a/files/ru/web/css/_doublecolon_marker/index.html +++ b/files/ru/web/css/_doublecolon_marker/index.html @@ -7,7 +7,7 @@ translation_of: 'Web/CSS/::marker' <p><span class="seoSummary">Псевдоэлемент <strong><code>::marker</code></strong> применяет стили к маркеру элемента списка, которые обычно содержит значок или номер.</span> Работает с любым элементом или псевдоэлементом, к которого установлен <code><a href="/en-US/docs/Web/CSS/display">display: list-item</a></code>, например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.</p> -<pre class="brush: css no-line-numbers notranslate">::marker { +<pre class="brush: css no-line-numbers">::marker { color: blue; font-size: 1.2em; }</pre> @@ -37,7 +37,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Peaches</li> <li>Apples</li> <li>Plums</li> @@ -45,7 +45,7 @@ translation_of: 'Web/CSS/::marker' <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">ul li::marker { +<pre class="brush: css">ul li::marker { color: red; font-size: 1.5em; }</pre> diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html index ce536f7fe0..8fde2fd945 100644 --- a/files/ru/web/css/_doublecolon_placeholder/index.html +++ b/files/ru/web/css/_doublecolon_placeholder/index.html @@ -11,7 +11,7 @@ translation_of: 'Web/CSS/::placeholder' <p><a href="/ru/docs/Web/CSS">CSS</a> <a href="/ru/docs/Web/CSS/Pseudo-elements">псевдоэлемент</a> <strong><code>::placeholder</code></strong> представляет собой <a href="/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute">текст placeholder</a> в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.</p> -<pre class="brush: css no-line-numbers notranslate">::placeholder { +<pre class="brush: css no-line-numbers">::placeholder { color: blue; font-size: 1.5em; }</pre> @@ -32,11 +32,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь!"></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь!"></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: red; font-size: 1.2em; font-style: italic; @@ -50,11 +50,11 @@ translation_of: 'Web/CSS/::placeholder' <h4 id="HTML_2">HTML</h4> -<pre class="brush:html line-numbers language-html notranslate"><input placeholder="Введите что-нибудь..."></pre> +<pre class="brush:html line-numbers language-html"><input placeholder="Введите что-нибудь..."></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">input::placeholder { +<pre class="brush: css">input::placeholder { color: green; } </pre> @@ -89,7 +89,7 @@ translation_of: 'Web/CSS/::placeholder' <p>В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют <code>aria-describedby</code> для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.</p> -<pre class="brush:html line-numbers language-html notranslate"><label for="user-email">Ваш email адрес</label> +<pre class="brush:html line-numbers language-html"><label for="user-email">Ваш email адрес</label> <span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span> <input id="user-email" aria-describedby="user-email-hint" name="email" type="email"> </pre> diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html index 0edc300055..b98d03c2f0 100644 --- a/files/ru/web/css/_doublecolon_slotted/index.html +++ b/files/ru/web/css/_doublecolon_slotted/index.html @@ -9,7 +9,7 @@ translation_of: 'Web/CSS/::slotted' <p>Это работает только при использовании внутри CSS, помещённого в <a href="/en-US/docs/Web/Web_Components/Using_shadow_DOM">shadow DOM</a>. Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.</p> -<pre class="brush: css no-line-numbers notranslate">/* Выбирает любой элемент, помещённый в слот */ +<pre class="brush: css no-line-numbers">/* Выбирает любой элемент, помещённый в слот */ ::slotted(*) { font-weight: bold; } @@ -30,7 +30,7 @@ translation_of: 'Web/CSS/::slotted' <p>В этом демо мы использовали простой шаблон с тремя слотами:</p> -<pre class="brush: html notranslate"><template id="person-template"> +<pre class="brush: html"><template id="person-template"> <div> <h2>Personal ID Card</h2> <slot name="person-name">NAME MISSING</slot> @@ -43,7 +43,7 @@ translation_of: 'Web/CSS/::slotted' <p>Пользовательский элемент — <code><person-details></code> — определяется следующим образом:</p> -<pre class="brush: js notranslate">customElements.define('person-details', +<pre class="brush: js">customElements.define('person-details', class extends HTMLElement { constructor() { super(); @@ -68,7 +68,7 @@ translation_of: 'Web/CSS/::slotted' <p>Элемент выглядит следующим образом при вставке на страницу:</p> -<pre class="brush: html notranslate"><person-details> +<pre class="brush: html"><person-details> <p slot="person-name">Dr. Shazaam</p> <span slot="person-age">Immortal</span> <span slot="person-occupation">Superhero</span> diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html index 9cc517042f..e9225b6f49 100644 --- a/files/ru/web/css/align-content/index.html +++ b/files/ru/web/css/align-content/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/align-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основное позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Основное позиционное выравнивание */ /* align-content не принимает значения left и right */ align-content: center; /* Расположить элементы вокруг центра */ align-content: start; /* Расположить элементы в начале */ @@ -101,7 +101,7 @@ align-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[4] notranslate">#container { +<pre class="brush: css; highlight[4]">#container { height:200px; width: 240px; align-content: center; /* Can be changed in the live sample */ @@ -169,7 +169,7 @@ select { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container" class="flex"> +<pre class="brush: html"><div id="container" class="flex"> <div id="item1">1</div> <div id="item2">2</div> <div id="item3">3</div> @@ -222,7 +222,7 @@ select { <div class="hidden"> <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var values = document.getElementById('values'); +<pre class="brush: js">var values = document.getElementById('values'); var display = document.getElementById('display'); var container = document.getElementById('container'); diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html index 8db0d1c026..3aee48338c 100644 --- a/files/ru/web/css/animation/index.html +++ b/files/ru/web/css/animation/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/animation <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* @keyframes duration | timing-function | delay | +<pre class="brush:css">/* @keyframes duration | timing-function | delay | iteration-count | direction | fill-mode | play-state | name */ animation: 3s ease-in 1s 2 reverse both paused slidein; @@ -42,7 +42,7 @@ translation_of: Web/CSS/animation <p>Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:</p> -<pre class="brush: html notranslate"><div class="view_port"> +<pre class="brush: html"><div class="view_port"> <div class="polling_message"> Listening for dispatches </div> @@ -50,7 +50,7 @@ translation_of: Web/CSS/animation </div> </pre> -<pre class="brush: css notranslate">.polling_message { +<pre class="brush: css">.polling_message { color: white; float: left; margin-right: 2%; diff --git a/files/ru/web/css/attr()/index.html b/files/ru/web/css/attr()/index.html index 07e97c3a88..b7596531f8 100644 --- a/files/ru/web/css/attr()/index.html +++ b/files/ru/web/css/attr()/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/attr() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:js notranslate">/* Пример простого использования */ +<pre class="brush:js">/* Пример простого использования */ attr(data-count); attr(title); @@ -161,12 +161,12 @@ attr(data-something, 'default'); <h2 id="Пример">Пример</h2> -<pre class="brush: css notranslate">p::before { +<pre class="brush: css">p::before { content: attr(data-foo) " "; } </pre> -<pre class="brush: html notranslate"><p data-foo="hello">world</p> +<pre class="brush: html"><p data-foo="hello">world</p> </pre> <h3 id="Результат">Результат</h3> diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html index 7d02a61e7d..1983bf5480 100644 --- a/files/ru/web/css/background-attachment/index.html +++ b/files/ru/web/css/background-attachment/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/background-attachment <h2 id="Syntax">Синтаксис</h2> -<pre class="brush: css notranslate">/* Ключевые значения */ +<pre class="brush: css">/* Ключевые значения */ background-attachment: scroll; background-attachment: fixed; background-attachment: local; @@ -51,7 +51,7 @@ background-attachment: unset;</pre> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -60,7 +60,7 @@ background-attachment: unset;</pre> <h4 id="CSS">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; } @@ -76,7 +76,7 @@ background-attachment: unset;</pre> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> There were doors all round the hall, but they were all locked; and when Alice had been all the way down one side and up the other, trying every door, she walked sadly down the middle, wondering how she was ever to @@ -94,7 +94,7 @@ background-attachment: unset;</pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush:css; highlight:[3]; notranslate">p { +<pre class="brush:css; highlight:[3];">p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html index 32a99c7e9e..f27b97713e 100644 --- a/files/ru/web/css/background-image/index.html +++ b/files/ru/web/css/background-image/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/background-image <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">background-image: none; +<pre class="brush: css">background-image: none; background-image: url(http://www.example.com/bck.png); background-image: inherit; @@ -51,7 +51,7 @@ background-image: inherit; <h4 id="HTML_содержимое">HTML содержимое</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> <p class="catsandstars"> This paragraph is full of cats<br />and stars. </p> @@ -64,7 +64,7 @@ background-image: inherit; <h4 id="CSS_содержимое">CSS содержимое</h4> -<pre class="brush: css notranslate">pre, p { +<pre class="brush: css">pre, p { font-size: 1.5em; color: #FE7F88; background-color: transparent; diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html index 2c4613dee8..bf69fc5788 100644 --- a/files/ru/web/css/border-bottom/index.html +++ b/files/ru/web/css/border-bottom/index.html @@ -13,13 +13,13 @@ translation_of: Web/CSS/border-bottom <p>Как и все сокращённые свойства, <code>border-bottom</code> устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: thick green; </pre> <p>... это то же самое, что ...</p> -<pre class="brush: css notranslate">border-bottom-style: dotted; +<pre class="brush: css">border-bottom-style: dotted; border-bottom: none thick green; </pre> @@ -37,7 +37,7 @@ border-bottom: none thick green; <h2 id="Syntax">Syntax</h2> -<pre class="brush: css no-line-numbers notranslate">border-bottom: 1px; +<pre class="brush: css no-line-numbers">border-bottom: 1px; border-bottom: 2px dotted; border-bottom: medium dashed blue; </pre> @@ -69,13 +69,13 @@ border-bottom: medium dashed blue; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div> +<pre class="brush: html"><div> This box has a border on the bottom side. </div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html index 56ab00b597..009c81968e 100644 --- a/files/ru/web/css/box-sizing/index.html +++ b/files/ru/web/css/box-sizing/index.html @@ -62,13 +62,13 @@ translation_of: Web/CSS/box-sizing <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="content-box">Content box</div> +<pre class="brush: html"><div class="content-box">Content box</div> <br> <div class="border-box">Border box</div></pre> <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 160px; height: 80px; padding: 20px; diff --git a/files/ru/web/css/calc()/index.html b/files/ru/web/css/calc()/index.html index 3c34440b4d..6f6db79e20 100644 --- a/files/ru/web/css/calc()/index.html +++ b/files/ru/web/css/calc()/index.html @@ -38,7 +38,7 @@ translation_of: Web/CSS/calc() <h3 id="Формальный_синтаксис">Формальный синтаксис</h3> -<pre class="syntaxbox notranslate">calc(<em>expression</em>)</pre> +<pre class="syntaxbox">calc(<em>expression</em>)</pre> <h2 id="Примеры">Примеры</h2> @@ -46,7 +46,7 @@ translation_of: Web/CSS/calc() <p><code>calc()</code> делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px. </p> -<pre class="brush: css notranslate">.banner { +<pre class="brush: css">.banner { position: absolute; left: 5%; /* для браузеров не поддерживающих calc() */ left: calc(40px); @@ -60,7 +60,7 @@ translation_of: Web/CSS/calc() } </pre> -<pre class="brush: html notranslate"><div class="banner">Это баннер!</div></pre> +<pre class="brush: html"><div class="banner">Это баннер!</div></pre> <p>{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}</p> @@ -70,7 +70,7 @@ translation_of: Web/CSS/calc() <p>Давайте посмотрим некоторый код CSS:</p> -<pre class="brush: css notranslate">input { +<pre class="brush: css">input { padding: 2px; display: block; width: 98%; /* для браузеров, не поддерживающих calc() */ @@ -87,7 +87,7 @@ translation_of: Web/CSS/calc() <p>Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию <code>calc()</code>, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:</p> -<pre class="brush: html notranslate"><form> +<pre class="brush: html"><form> <div id="formbox"> <label>Type something:</label> <input type="text"> @@ -101,7 +101,7 @@ translation_of: Web/CSS/calc() <p>Вы также можете использовать <code>calc()</code> с CSS переменными. Рассмотрим пример кода:</p> -<pre class="notranslate">.foo { +<pre>.foo { --widthA: 100px; --widthB: calc(var(--widthA) / 2); --widthC: calc(var(--widthB) / 2); diff --git a/files/ru/web/css/clamp()/index.html b/files/ru/web/css/clamp()/index.html index 1e6fa2b6fc..3bba677ccc 100644 --- a/files/ru/web/css/clamp()/index.html +++ b/files/ru/web/css/clamp()/index.html @@ -9,14 +9,14 @@ translation_of: Web/CSS/clamp() <p><code>clamp(MIN, VAL, MAX)</code> вычисляется как <code>{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))</code></p> -<pre class="brush: css; no-line-numbers notranslate">/* свойство: clamp(expression{3}) */ +<pre class="brush: css; no-line-numbers">/* свойство: clamp(expression{3}) */ width: clamp(10px, 4em, 80px);</pre> <p>В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.</p> <p>Давайте предположим, что в примере выше 1em равен 16px:</p> -<pre class="brush: css; no-line-numbers notranslate">width: clamp(10px, 4em, 80px); +<pre class="brush: css; no-line-numbers">width: clamp(10px, 4em, 80px); /* если 1em = 16px, 4em = (16px * 4) = 64px */ width: clamp(10px, 64px, 80px); /* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) */ @@ -57,10 +57,10 @@ width: 64px;</pre> <p><code>clamp()</code> позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в <a href="https://css-tricks.com/snippets/css/fluid-typography/">Fluid Typography</a>, но в одну строку и без использования медиавыражений.</p> -<pre class="brush: css notranslate">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } +<pre class="brush: css">p { font-size: clamp(1rem, 2.5vw, 1.5rem); } </pre> -<pre class="brush: html; notranslate"><p> +<pre class="brush: html;"><p> If 2.5vw is less than 1rem, the font-size will be 1rem. If 2.5vw is greater than 1.5rem, the font-size will be 1.5rem. Otherwise, it will be 2.5vw. diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html index 0b14e0faee..1a1bc18b7e 100644 --- a/files/ru/web/css/color_value/index.html +++ b/files/ru/web/css/color_value/index.html @@ -992,7 +992,7 @@ translation_of: Web/CSS/color_value <h4 id="currentColor_пример">currentColor пример</h4> -<pre class="brush: html notranslate"><div style="color:blue; border: 1px dashed currentColor;"> +<pre class="brush: html"><div style="color:blue; border: 1px dashed currentColor;"> Цвет текста-синий. <div style="background:currentColor; height:9px;"></div> This block is surrounded by a blue border. @@ -1029,7 +1029,7 @@ translation_of: Web/CSS/color_value <p>В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.</p> -<pre class="notranslate">/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ +<pre>/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */ /* Шестнадцатеричный синтаксис */ #f09 @@ -1067,7 +1067,7 @@ rgb(1e2, .5e1, .5e0, +.25e2%) <h5 id="RGB_вариации_прозрачности">RGB вариации прозрачности</h5> -<pre class="notranslate">/* Шестнадцатеричный синтаксис */ +<pre>/* Шестнадцатеричный синтаксис */ #3a30 <span style="background: #3a30;"> /* 0% непрозрачный зелёный цвет */ </span> #3A3F <span style="background: #3A3F;"> /* полный непрозрачный зелёный цвет */ </span> #33aa3300 <span style="background: #33aa3300;"> /* 0% непрозрачный зелёный цвет */ </span> 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 454ad6b5fe..5b10b41321 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 @@ -38,7 +38,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="HTML">HTML</h3> -<pre class="brush: html line-numbers language-html notranslate"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> +<pre class="brush: html line-numbers language-html"><code class="language-html"><span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>Нижний отступ этого абзаца схлопнулся …<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>p</span><span class="punctuation token">></span></span>… с верхним отступом этого абзаца, объеденив отступы между ними в один, равный <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>code</span><span class="punctuation token">></span></span>1.2rem<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>code</span><span class="punctuation token">></span></span>.<span class="tag token"><span class="tag token"><span class="punctuation token"></</span>p</span><span class="punctuation token">></span></span> <span class="tag token"><span class="tag token"><span class="punctuation token"><</span>div</span><span class="punctuation token">>Этот родительский элемент содержит два</span></span></code> <code>абзаца</code><code class="language-html">! @@ -50,7 +50,7 @@ translation_of: Web/CSS/CSS_Box_Model/Mastering_margin_collapsing <h3 id="CSS">CSS</h3> -<pre class="brush: css line-numbers language-css notranslate"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> +<pre class="brush: css line-numbers language-css"><code class="language-css"><span class="selector token">div</span> <span class="punctuation token">{</span> <span class="property token">margin</span><span class="punctuation token">:</span> <span class="number token">2</span><span class="token unit">rem</span> <span class="number token">0</span><span class="punctuation token">;</span> <span class="property token">background</span><span class="punctuation token">:</span> lavender<span class="punctuation token">;</span> <span class="punctuation token">}</span> diff --git a/files/ru/web/css/css_fonts/index.html b/files/ru/web/css/css_fonts/index.html index 6011699241..bbd231468e 100644 --- a/files/ru/web/css/css_fonts/index.html +++ b/files/ru/web/css/css_fonts/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/CSS_Fonts <p>Следующий пример показывает простое использование шрифтовых свойств, стилизующих тэг <p>.</p> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 600px; margin: 0 auto; font-family: "Helvetica Neue", "Arial", sans-serif; @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Fonts letter-spacing: 1px; }</pre> -<pre class="brush: html notranslate"><p>Three hundred years ago<br> +<pre class="brush: html"><p>Three hundred years ago<br> I thought I might get some sleep<br> I stretched myself out onna antique bed<br> An' my spirit did a midnite creep</p></pre> diff --git a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html index 4fd846a256..424d65eae9 100644 --- a/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html +++ b/files/ru/web/css/css_grid_layout/basic_concepts_of_grid_layout/index.html @@ -37,7 +37,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В этом примере есть div, содержащий класс wrapper с пятью потомками</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -48,13 +48,13 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Сделаем wrapper grid контейнером</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -97,7 +97,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы создаём сетку с шириной колонки 200px. Каждый дочерний элемент сетки будет располагаться в отдельной ячейке сетки.</p> <div id="grid_first"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -106,14 +106,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 200px 200px 200px; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -143,7 +143,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Размер треков (полос) может быть задан с помощью любой единицы длины. Спецификация также вводит дополнительную единицу длины, позволяющую создавать эластичные (flexible) грид-треки. Новая единица длины <code>fr</code> представляет собой долю (fraction) доступного пространства в грид-контейнере. Определение грида в коде ниже создаст три трека равной длины, которые будут увеличиваться и уменьшаться в размерах в соответствии с доступным пространством.</p> <div id="fr_unit_ls"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -152,14 +152,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -186,7 +186,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В следующем примере мы создаём грид с треком в <code>2fr</code> и двумя треками по <code>1fr</code>. Доступное пространство разбивается на четыре части. Две части занимает первый трек, и две части - два оставшихся. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 2fr 1fr 1fr; } @@ -194,7 +194,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В последнем примере смешаем треки с абсолютной длиной и треки с длиной во fr. Размер первого трека 500 пикселей, и эта фиксированная ширина убирается из доступного пространства. Оставшееся пространство разбивается на три части и пропорционально разделяется между двумя эластичными треками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 500px 1fr 2fr; } @@ -204,7 +204,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В огромных гридах с большим количеством треков можно использовать нотацию <code>repeat()</code> , чтобы повторить структуру треков или её часть. Например, такое задание грида:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 1fr 1fr 1fr; } @@ -212,7 +212,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>можно записать вот так:</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -220,7 +220,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотацию можно использовать как часть списка треков. В следующем примере создаётся грид с начальным треком шириной в 20 пикселей, шестью треками шириной в 1fr и последним треком шириной в 20 пикселей.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: 20px repeat(6, 1fr) 20px; } @@ -228,7 +228,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Repeat-нотация в качестве аргумента принимает список треков, поэтому с её помощью можно создавать структуру из повторяющихся треков. В следующем примере грид состоит из 10 треков: за треком шириной <code>1fr</code> следует трек шириной <code>2fr</code> , и все это дело повторяется пять раз.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(5, 1fr 2fr); } @@ -242,7 +242,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В примере ниже мы задаём <code>grid-auto-rows</code> , чтобы треки, создаваемые в неявном гриде были высотой 200 пикселей.</p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -251,7 +251,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; @@ -259,7 +259,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -289,7 +289,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Для подобных ситуаций в Grid предусмотрено решение с помощью функции {{cssxref("minmax", "minmax()")}}. В следующем примере <code>minmax()</code> используется, как значение свойства {{cssxref("grid-auto-rows")}}. Автоматически создаваемые строки будут как минимум 100 пикселей в высоту, а как максимум примут значение <code>auto</code>. Использование <code>auto</code> означает, что размер строки посмотрит на размер контента и растянется таким образом, чтобы вместить самый высокий элемент ячейки в этой строке. </p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -297,7 +297,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -319,7 +319,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two <p>I have some more content in.</p> @@ -349,7 +349,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Второй элемент начинается с колоночной линии 1 и занимает один трек. Это поведение по умолчанию, поэтому не нужно задавать конечную линию. Элемент также занимает два строчных трека - со строчной линии 3 до строчной линии 5. Остальные элементы самостоятельно размещаются в пустых пространствах грида. </p> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -358,7 +358,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -377,7 +377,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -419,7 +419,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p><em>Зазоры (Gutters)</em> или аллеи (<em>alleys)</em> между грид-ячейками можно создать с помощью свойств {{cssxref("grid-column-gap")}} и {{cssxref("grid-row-gap")}}, или с помощью сокращённого свойства {{cssxref("grid-gap")}}. В примере ниже мы создаём зазор в 10 пикселей между колонками и в <code>1em</code> между строками.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 10px; @@ -427,7 +427,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -437,7 +437,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -468,7 +468,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Грид-элемент может быть и грид-контейнером. В следующем примере у нас есть созданный ранее трёхколоночный грид, в котором размещены два элемента. В данном случае у первого элемента есть несколько подэлементов. Поскольку эти подэлементы не являются прямыми потомками грида, они не участвуют в структуре грида и отображаются в соответствии с нормальным потоком документа.</p> <div id="nesting"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -485,7 +485,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Если мы задаём для <code>box1</code> значение <code>display: grid</code> , то можем написать для него структуру треков, и он тоже станет гридом, а его дочерние элементы будут размещены внутри этого нового грида.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -496,7 +496,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>В приведённом выше примере мы можем отредактировать вложенный грид, изменив <code>grid-template-columns: repeat(3, 1fr)</code>, на <code>grid-template-columns: subgrid</code>. Вложенный грид будет использовать родительскую структуру треков, чтобы разместить свои дочерние элементы.</p> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 4; grid-row-start: 1; @@ -548,7 +548,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Несколько грид-элементов могут занимать одну и ту же ячейку. Если вернуться к нашему примеру с элементами, размещёнными по номерам линий, мы можем сделать так, чтобы два элемента перекрывались:</p> <div id="l_ex"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; @@ -607,7 +607,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout <p>Порядком, в котором элементы накладываются друг на друга, можно управлять с помощью свойства <code>z-index</code> - точно так же, как в случае с позиционированными элементами. Если задать <code>box2</code> значение <code>z-index</code> , меньшее, чем у <code>box1</code> , в стеке он отобразится под элементом <code>box1</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; @@ -628,7 +628,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </pre> <div class="hidden"> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1">One</div> <div class="box box2">Two</div> <div class="box box3">Three</div> @@ -637,7 +637,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Basic_Concepts_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; 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 cce90b7f30..ce93888a07 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 @@ -41,7 +41,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_1"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -59,7 +59,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -85,7 +85,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -104,7 +104,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_2"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -122,7 +122,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -150,7 +150,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -189,7 +189,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_3"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -207,7 +207,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(8, 1fr); grid-gap: 10px; @@ -235,7 +235,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -256,7 +256,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_4"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -274,7 +274,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 10px; @@ -290,7 +290,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> </div> </pre> @@ -322,7 +322,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_5"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -340,7 +340,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -366,7 +366,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -381,7 +381,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_6"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -399,7 +399,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -426,7 +426,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -441,7 +441,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_7"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -459,7 +459,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -486,7 +486,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -511,7 +511,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_8"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -529,7 +529,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -557,7 +557,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> @@ -576,7 +576,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout <div id="alignment_9"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -594,7 +594,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 100px); grid-template-rows: repeat(3,100px); @@ -621,7 +621,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="item1">Item 1</div> <div class="item2">Item 2</div> <div class="item3">Item 3</div> 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 58b6f849f2..79f92b22e8 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 @@ -24,7 +24,7 @@ original_slug: >- <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> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -42,14 +42,14 @@ original_slug: >- </pre> </div> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); } </pre> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -64,7 +64,7 @@ original_slug: >- <p>Мы можем воспользоваться размещением по линиям (line-based placement), чтобы расположить элементы на гриде. Например, нам нужно, чтобы первый элемент начинался от левого края и занимал один трек-колонку. Пусть он также начинается с первой строчной линии, то есть, от верхнего края грида, и занимает пространство до четвёртой строчной линии.</p> <div id="Line_Number"> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-column-end: 2; grid-row-start: 1; @@ -77,7 +77,7 @@ original_slug: >- <p>Задавая адреса для каждого элемента по отдельности, мы можем разместить все наши четыре элемента по колонкам и строкам. Заметьте, что при желании можно оставить ячейки пустыми. Одна из самых приятных вещей при работе с Grid Layout - возможность создавать негативное пространство (пустые области в макете) без кувырков через голову и прочих хаков.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -98,7 +98,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -106,7 +106,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box2 { +<pre class="brush: css">.box2 { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; @@ -135,7 +135,7 @@ original_slug: >- <p>Мы написали много кода, чтобы разместить каждый элемент. Неудивительно, что существует <a href="/ru/docs/Web/CSS/Shorthand_properties">краткая форма записи свойств</a>. {{cssxref("grid-column-start")}} и {{cssxref("grid-column-end")}} могут быть объединены в одном {{cssxref("grid-column")}}, а {{cssxref("grid-row-start")}} и {{cssxref("grid-row-end")}} - в {{cssxref("grid-row")}}.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -156,7 +156,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -164,7 +164,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 / 2; grid-row: 1 / 4; } @@ -191,7 +191,7 @@ original_slug: >- <div id="End_Lines"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -212,7 +212,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -220,7 +220,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: 4; @@ -248,7 +248,7 @@ original_slug: >- <div id="New_Shorthand"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -269,7 +269,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -277,7 +277,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -310,7 +310,7 @@ original_slug: >- </ul> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -331,7 +331,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -339,7 +339,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { @@ -375,7 +375,7 @@ original_slug: >- <p>В примере ниже мы "перевернули" определение нашего грида, при размещении элементов задавая линии с конца, то есть, от правого и нижнего краёв.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -396,7 +396,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -404,7 +404,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column-start: -1; grid-column-end: -2; grid-row-start: -1; @@ -436,7 +436,7 @@ original_slug: >- <p>Возможность адресовать и первую, и последнюю линии грида становится крайне полезной, если нам нужно растянуть элемент на всю длину грида. Сделать это можно вот так:</p> -<pre class="brush: css notranslate">.item { +<pre class="brush: css">.item { grid-column: 1 / -1; } </pre> @@ -448,7 +448,7 @@ original_slug: >- <p>Зазоры появляются только между треками и не добавляют пространство сверху, снизу, справа или слева грид-контейнеру. Мы можем добавить зазоры в предыдущий пример, дописав эти свойства грид-контейнеру.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -469,7 +469,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -477,7 +477,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1 ; grid-row: 1 / 4; } @@ -508,7 +508,7 @@ original_slug: >- <p>Оба свойства также можно записать с помощью свойства-сокращения {{cssxref("grid-gap")}}. Если задать только одно значение, то оно определит размер зазоров и между колонками, и между строками. Если мы задаём два значения, то первое используется для <code>grid-row-gap</code> , а второе - для <code>grid-column-gap</code>.</p> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 100px); @@ -523,7 +523,7 @@ original_slug: >- <p>В дополнение к возможности обращаться к начальной и конечной линии по их номерам вы можете задать номер начальной линии, а после - количество треков, которые должен занять элемент.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -544,7 +544,7 @@ original_slug: >- </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> @@ -552,7 +552,7 @@ original_slug: >- </div> </pre> -<pre class="brush: css notranslate">.box1 { +<pre class="brush: css">.box1 { grid-column: 1; grid-row: 1 / span 3; } @@ -574,7 +574,7 @@ original_slug: >- <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 { +<pre>.box1 { grid-column-start: 1; grid-row-start: 1; grid-row-end: span 3; @@ -583,7 +583,7 @@ original_slug: >- <p>Во втором примере поступим наоборот: зададим конечную строчную линию, а в значении свойства, отвечающего за начальную линию, напишем <code>span 3</code>. Это значит, что элемент должен занять три трека до заданной конечной линии. Грид-область начинается с линии 4 и занимает три трека до линии 1.</p> -<pre class="notranslate">.box1 { +<pre>.box1 { grid-column-start: 1; grid-row-start: span 3; grid-row-end: 4; 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 fe9d21dcb8..1e8690d0ad 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 @@ -22,7 +22,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="onedtwod"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -40,7 +40,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -49,7 +49,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; flex-wrap: wrap; } @@ -71,7 +71,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Two_Dimensional_With_Grid"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -89,7 +89,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> @@ -98,7 +98,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); } @@ -133,7 +133,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В первом примере, использующем flexbox, у нас есть контейнер с тремя элементами. Для блока-обёртки wrapper установлено свойство {{cssxref("min-height")}}, и оно задаёт высоту flex-контейнера. Мы установили свойство {{cssxref("align-items")}} flex-контейнера в значение <code>flex-end</code> , поэтому элементы выравниваются по концу flex-контейнера. Мы также установили значение свойства {{cssxref("align-self")}} для <code>box1</code> таким образом, что оно перезапишет поведение по умолчанию и заставит наш блок растянутся на всю высоту контейнера. Для <code>box2</code> свойство {{cssxref("align-self")}} установлено таким образом, что блок перепрыгнет в начало flex-контейнера.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -151,14 +151,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: flex; align-items: flex-end; min-height: 200px; @@ -178,7 +178,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Второй пример использует грид, чтобы создать тот же самый макет, и на этот раз мы рассмотрим то, как свойства выравнивания блоков применяются к гридам. Вместо <code>flex-start</code> и <code>flex-end</code> мы задаём <code>start</code> и <code>end</code> . В случае с макетом на гридах мы выравниваем элементы внутри их грид-области, в данном примере - это одна единственная грид-ячейка, но в целом грид-область может состоять из нескольких грид-ячеек.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -196,14 +196,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3,1fr); align-items: end; @@ -233,7 +233,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже мы используем ключевое слово <code>auto-fill</code> вместо целого числа в repeat-нотации и задаём структуру треков размером в 200 пикселей. Это значит, что грид создаст столько треков-колонок размером в 200 пикселей, сколько их может разместиться в контейнере.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -251,14 +251,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, 200px); } @@ -271,7 +271,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Давайте вспомним пример с flexbox, когда элементы, размер которых больше 200 пикселей, переходят на новую строку. Тот же самый эффект в гридах мы можем получить комбинируя <code>auto-fill</code> и функцию {{cssxref("minmax", "minmax()")}}. В примере ниже мы создаём автозаполненные треки с помощью <code>minmax</code>. Мы хотим, чтобы треки были как минимум 200 пикселей в ширину, это наше минимальное значение, а для максимального зададим <code>1fr</code>. В процессе, когда браузер вычисляет, сколько блоков в 200 пикселей может разместиться в контейнере - при этом учитывая грид-зазоры - он расценивает максимум <code>1fr</code> как инструкцию распределить оставшееся свободное пространство между этими блоками.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -289,14 +289,14 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div>One</div> <div>Two</div> <div>Three</div> </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); } @@ -317,7 +317,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>В примере ниже у нас есть блок-обёртка с четырьмя дочерними элементами. Третий элемент абсолютно позиционирован и одновременно размещён в гриде с помощью привязки к грид-линиям. У грид-контейнера <code>position:</code> <code>relative</code> , поэтому он становится контекстом позиционирования для нашего третьего элемента.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -335,7 +335,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3"> @@ -346,7 +346,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -385,7 +385,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <p>Задаём <code>.box3</code> свойство position в значении relative и затем перемещаем наш под-элемент с помощью свойств сдвига. В данном случае контекстом позиционирования является грид-область.</p> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -403,7 +403,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box1">One</div> <div class="box2">Two</div> <div class="box3">Three @@ -415,7 +415,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(4,1fr); grid-auto-rows: 200px; @@ -453,7 +453,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_Before"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -477,7 +477,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -490,7 +490,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); @@ -509,7 +509,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout <div id="Display_Contents_After"> <div class="hidden"> -<pre class="brush: css notranslate">* {box-sizing: border-box;} +<pre class="brush: css">* {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; @@ -533,7 +533,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </pre> </div> -<pre class="brush: html notranslate"><div class="wrapper"> +<pre class="brush: html"><div class="wrapper"> <div class="box box1"> <div class="nested">a</div> <div class="nested">b</div> @@ -546,7 +546,7 @@ translation_of: Web/CSS/CSS_Grid_Layout/Relationship_of_Grid_Layout </div> </pre> -<pre class="brush: css notranslate">.wrapper { +<pre class="brush: css">.wrapper { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: minmax(100px, auto); diff --git a/files/ru/web/css/custom-ident/index.html b/files/ru/web/css/custom-ident/index.html index f39bad2791..1e48ff731e 100644 --- a/files/ru/web/css/custom-ident/index.html +++ b/files/ru/web/css/custom-ident/index.html @@ -59,7 +59,7 @@ translation_of: Web/CSS/custom-ident <h3 id="Действительные_идентификаторы">Действительные идентификаторы</h3> -<pre class="notranslate">nono79 Состоит из букв и цифр +<pre>nono79 Состоит из букв и цифр ground-level Состоит из букв, цифр и дефиса -test Буквы, следующие за одним дефисом _internal Буквы, следующие за нижним подчёркиванием @@ -69,7 +69,7 @@ bili\.bob Буквы и экранированная точка <h3 id="Недействительные_идентификаторы">Недействительные идентификаторы</h3> -<pre class="example-bad notranslate">34rem Не может начинаться с цифры +<pre class="example-bad">34rem Не может начинаться с цифры -12rad Не может начинаться с дефиса, за которым следует цифра bili.bob Только буквы, цифры, _ и - можно не экранириовать --toto Не может начинаться с двух дефисов подряд diff --git a/files/ru/web/css/direction/index.html b/files/ru/web/css/direction/index.html index f1de56062b..10bcafb9b7 100644 --- a/files/ru/web/css/direction/index.html +++ b/files/ru/web/css/direction/index.html @@ -21,7 +21,7 @@ translation_of: Web/CSS/direction <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ direction: ltr; direction: rtl; @@ -54,7 +54,7 @@ direction: unset; <h3 id="Setting_right-to-left_direction">Setting right-to-left direction</h3> -<pre class="brush: css notranslate">blockquote { +<pre class="brush: css">blockquote { direction: rtl; } </pre> diff --git a/files/ru/web/css/flex-wrap/index.html b/files/ru/web/css/flex-wrap/index.html index 339db730a5..fa6ee2b564 100644 --- a/files/ru/web/css/flex-wrap/index.html +++ b/files/ru/web/css/flex-wrap/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/flex-wrap <p>Свойство <a href="/en-US/docs/CSS" title="CSS">CSS</a> <strong><code>flex-wrap</code></strong> задаёт правила вывода flex-элементов — в одну строку или в несколько, с переносом блоков. Если перенос разрешён, то возможно задать направление, в котором выводятся блоки.</p> -<pre class="brush:css no-line-numbers notranslate">flex-wrap: nowrap; +<pre class="brush:css no-line-numbers">flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; @@ -48,7 +48,7 @@ flex-wrap: unset; <h3 id="HTML">HTML</h3> <div id="Live_Sample"> -<pre class="brush: html notranslate"><h4>This is an example for flex-wrap:wrap </h4> +<pre class="brush: html"><h4>This is an example for flex-wrap:wrap </h4> <div class="content"> <div class="red">1</div> <div class="green">2</div> @@ -70,7 +70,7 @@ flex-wrap: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">/* Common Styles */ +<pre class="brush: css">/* Common Styles */ .content, .content1, .content2 { diff --git a/files/ru/web/css/font-variant-ligatures/index.html b/files/ru/web/css/font-variant-ligatures/index.html index 29ca239e00..1640f4b970 100644 --- a/files/ru/web/css/font-variant-ligatures/index.html +++ b/files/ru/web/css/font-variant-ligatures/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/font-variant-ligatures <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">font-variant-ligatures: normal; +<pre class="brush:css">font-variant-ligatures: normal; font-variant-ligatures: none; font-variant-ligatures: common-ligatures; /* <common-lig-values> */ font-variant-ligatures: no-common-ligatures; /* <common-lig-values> */ @@ -74,7 +74,7 @@ font-variant-ligatures: unset; <h2 id="Примеры">Примеры</h2> -<pre class="brush:css notranslate">p { +<pre class="brush:css">p { font-variant-ligatures: none; } </pre> diff --git a/files/ru/web/css/font/index.html b/files/ru/web/css/font/index.html index 7f659fc14f..36e1569c4f 100644 --- a/files/ru/web/css/font/index.html +++ b/files/ru/web/css/font/index.html @@ -88,7 +88,7 @@ translation_of: Web/CSS/font <h2 id="Примеры">Примеры</h2> -<pre class="brush: css notranslate">/* Set the font size to 12px and the line height to 14px. +<pre class="brush: css">/* Set the font size to 12px and the line height to 14px. Set the font family to sans-serif */ p { font: 12px/14px sans-serif } @@ -112,7 +112,7 @@ p { font: status-bar } <div class="hidden"> <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p> +<pre class="brush: html"><p> Change the radio buttons below to see the generated shorthand and it's effect. </p> <form action="createShortHand()"> @@ -208,7 +208,7 @@ p { font: status-bar } <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body, input { +<pre class="brush: css">body, input { font: 14px arial; overflow: hidden; } @@ -261,7 +261,7 @@ p { font: status-bar } <h4 id="JavaScript">JavaScript</h4> -<pre class="brush: js notranslate">var textAreas = document.getElementsByClassName("curCss"), +<pre class="brush: js">var textAreas = document.getElementsByClassName("curCss"), shortText = "", getCheckedValue, setCss, diff --git a/files/ru/web/css/gap/index.html b/files/ru/web/css/gap/index.html index 016709a2a9..b736666a43 100644 --- a/files/ru/web/css/gap/index.html +++ b/files/ru/web/css/gap/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/gap <h2 id="Syntax">Syntax</h2> -<pre class="brush: css; no-line-numbers notranslate">/* One <length> value */ +<pre class="brush: css; no-line-numbers">/* One <length> value */ gap: 20px; gap: 1em; gap: 3vmin; @@ -70,7 +70,7 @@ gap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html; notranslate"><div id="flexbox"> +<pre class="brush: html;"><div id="flexbox"> <div></div> <div></div> <div></div> @@ -82,7 +82,7 @@ gap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css; highlight[5] notranslate">#flexbox { +<pre class="brush: css; highlight[5]">#flexbox { display: flex; flex-wrap: wrap; width: 300px; @@ -107,7 +107,7 @@ gap: unset; <h4 id="HTML_2">HTML</h4> -<pre class="brush: html; notranslate"><div id="grid"> +<pre class="brush: html;"><div id="grid"> <div></div> <div></div> <div></div> @@ -122,13 +122,13 @@ gap: unset; <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { grid-gap: 20px 5px; } </pre> </div> -<pre class="brush: css; highlight[5] notranslate">#grid { +<pre class="brush: css; highlight[5]">#grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); @@ -149,7 +149,7 @@ gap: unset; <h4 id="HTML_3">HTML</h4> -<pre class="brush: html; notranslate"><p class="content-box"> +<pre class="brush: html;"><p class="content-box"> This is some multi-column text with a 40px column gap created with the CSS <code>gap</code> property. Don't you think that's fun and exciting? I sure do! @@ -158,7 +158,7 @@ gap: unset; <h4 id="CSS_3">CSS</h4> -<pre class="brush: css; highlight[3] notranslate">.content-box { +<pre class="brush: css; highlight[3]">.content-box { column-count: 3; gap: 40px; } diff --git a/files/ru/web/css/grid-auto-flow/index.html b/files/ru/web/css/grid-auto-flow/index.html index 3d8b2e0892..9119b7d34e 100644 --- a/files/ru/web/css/grid-auto-flow/index.html +++ b/files/ru/web/css/grid-auto-flow/index.html @@ -11,7 +11,7 @@ translation_of: Web/CSS/grid-auto-flow <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые свойства и значения */ +<pre class="brush: css no-line-numbers">/* Ключевые свойства и значения */ grid-auto-flow: row; grid-auto-flow: column; grid-auto-flow: dense; @@ -52,7 +52,7 @@ grid-auto-flow: unset; <h3 id="HTML_Content">HTML Content</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> @@ -69,7 +69,7 @@ grid-auto-flow: unset; <h3 id="CSS_Content">CSS Content</h3> -<pre class="brush: css; highlight[7] notranslate">#grid { +<pre class="brush: css; highlight[7]">#grid { height: 200px; width: 200px; display: grid; @@ -100,7 +100,7 @@ grid-auto-flow: unset; background-color: aqua; }</pre> -<pre class="brush: js; hidden notranslate">function changeGridAutoFlow() { +<pre class="brush: js; hidden">function changeGridAutoFlow() { var grid = document.getElementById("grid"); var direction = document.getElementById("direction"); var dense = document.getElementById("dense"); diff --git a/files/ru/web/css/grid-template-columns/index.html b/files/ru/web/css/grid-template-columns/index.html index 7d1656a041..b5ef29242b 100644 --- a/files/ru/web/css/grid-template-columns/index.html +++ b/files/ru/web/css/grid-template-columns/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/grid-template-columns <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Keyword value */ +<pre class="brush: css">/* Keyword value */ grid-template-columns: none; /* <track-list> values */ @@ -85,7 +85,7 @@ grid-template-columns: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#grid { +<pre class="brush: css">#grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; @@ -101,7 +101,7 @@ grid-template-columns: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="grid"> +<pre class="brush: html"><div id="grid"> <div id="areaA">A</div> <div id="areaB">B</div> </div></pre> diff --git a/files/ru/web/css/hyphens/index.html b/files/ru/web/css/hyphens/index.html index 4d3f749e17..b14717d8ed 100644 --- a/files/ru/web/css/hyphens/index.html +++ b/files/ru/web/css/hyphens/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/hyphens <h2 id="Синтаксис"><font><font>Синтаксис</font></font></h2> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ hyphens: none; hyphens: manual; hyphens: auto; @@ -78,7 +78,7 @@ hyphens: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><dl> +<pre class="brush: html"><dl> <dt><code>none</code>: no hyphen; overflow if needed</dt> <dd lang="en" class="none">An extreme&shy;ly long English word</dd> <dt><code>manual</code>: hyphen only at &amp;hyphen; or &amp;shy; (if needed)</dt> @@ -90,7 +90,7 @@ hyphens: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">dd { +<pre class="brush: css">dd { width: 55px; border: 1px solid black; } diff --git a/files/ru/web/css/inline-size/index.html b/files/ru/web/css/inline-size/index.html index 065b30334d..beca129e19 100644 --- a/files/ru/web/css/inline-size/index.html +++ b/files/ru/web/css/inline-size/index.html @@ -13,7 +13,7 @@ translation_of: Web/CSS/inline-size <h2 id="Syntax">Syntax</h2> -<pre class="brush:css no-line-numbers notranslate">/* <length> values */ +<pre class="brush:css no-line-numbers">/* <length> values */ inline-size: 300px; inline-size: 25em; @@ -52,12 +52,12 @@ inline-size: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p class="exampleText">Example text</p> +<pre class="brush: html"><p class="exampleText">Example text</p> </pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">.exampleText { +<pre class="brush: css">.exampleText { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; diff --git a/files/ru/web/css/justify-content/index.html b/files/ru/web/css/justify-content/index.html index 13a30495e0..57c5dbc398 100644 --- a/files/ru/web/css/justify-content/index.html +++ b/files/ru/web/css/justify-content/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/justify-content <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Позиционное выравнивание */ +<pre class="brush:css no-line-numbers">/* Позиционное выравнивание */ justify-content: center; /* Выравнивание элементов по центру */ justify-content: start; /* Выравнивание элементов в начале */ justify-content: end; /* Выравнивание элементов в конце */ @@ -109,7 +109,7 @@ justify-content: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">#container { +<pre class="brush: css">#container { display: flex; justify-content: space-between; /* Может быть изменено */ } @@ -124,7 +124,7 @@ justify-content: unset; <div class="hidden"> <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div></div> <div></div> <div></div> @@ -148,7 +148,7 @@ justify-content: unset; <h3 id="JavaScript">JavaScript</h3> -<pre class="brush: js notranslate">var justifyContent = document.getElementById("justifyContent"); +<pre class="brush: js">var justifyContent = document.getElementById("justifyContent"); justifyContent.addEventListener("change", function (evt) { document.getElementById("container").style.justifyContent = evt.target.value; diff --git a/files/ru/web/css/justify-items/index.html b/files/ru/web/css/justify-items/index.html index ef73c90d93..0695ab5ecc 100644 --- a/files/ru/web/css/justify-items/index.html +++ b/files/ru/web/css/justify-items/index.html @@ -29,7 +29,7 @@ translation_of: Web/CSS/justify-items <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* Основные ключевые слова */ +<pre class="brush:css no-line-numbers">/* Основные ключевые слова */ justify-items: auto; justify-items: normal; justify-items: stretch; 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 a0a1200549..983b86da57 100644 --- a/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html +++ b/files/ru/web/css/layout_cookbook/breadcrumb_navigation/index.html @@ -24,7 +24,7 @@ translation_of: Web/CSS/Layout_cookbook/Breadcrumb_Navigation <div class="blockIndicator note"> <p><strong>Примечание</strong>: В приведённом выше примере используются два селектора для вставки содержимого перед каждым li, кроме первого. Этого также можно добиться, используя только один селектор:</p> -<pre class="notranslate">.breadcrumb li:not(:first-child)::before { +<pre>.breadcrumb li:not(:first-child)::before { content: "→"; } </pre> diff --git a/files/ru/web/css/minmax()/index.html b/files/ru/web/css/minmax()/index.html index 090a895d53..f8a1a182d4 100644 --- a/files/ru/web/css/minmax()/index.html +++ b/files/ru/web/css/minmax()/index.html @@ -5,7 +5,7 @@ translation_of: Web/CSS/minmax() --- <p><code><strong>minmax</strong></code><strong><code>()</code></strong> это <a href="/en-US/docs/Web/CSS">CSS</a> ф<span id="result_box" lang="ru"><span>ункция, определяющая диапазон размеров, который больше или равен </span></span><var>min</var><span lang="ru"><span> и меньше или равен </span></span><var>max</var>. Используется в <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/CSS_Grid,_Logical_Values_and_Writing_Modes">CSS Grids</a>.</p> -<pre class="brush: css no-line-numbers notranslate">/* <inflexible-breadth>, <track-breadth> values */ +<pre class="brush: css no-line-numbers">/* <inflexible-breadth>, <track-breadth> values */ minmax(200px, 1fr) minmax(400px, 50%) minmax(30%, 300px) @@ -64,7 +64,7 @@ minmax(auto, 300px) <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight[3] notranslate">#container { +<pre class="brush: css; highlight[3]">#container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; @@ -83,7 +83,7 @@ minmax(auto, 300px) <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div id="container"> +<pre class="brush: html"><div id="container"> <div> Item as wide as the content,<br/> but at most 300 pixels. diff --git a/files/ru/web/css/object-position/index.html b/files/ru/web/css/object-position/index.html index 8df8e52a1f..8b57b7903a 100644 --- a/files/ru/web/css/object-position/index.html +++ b/files/ru/web/css/object-position/index.html @@ -15,7 +15,7 @@ translation_of: Web/CSS/object-position <h2 id="Syntax">Синтаксис</h2> -<pre class="brush:css no-line-numbers notranslate">/* значения <position> */ +<pre class="brush:css no-line-numbers">/* значения <position> */ object-position: center top; object-position: 100px 50px; @@ -52,7 +52,7 @@ object-position: unset; <p>Здесь мы видим HTML, содержаний два {{HTMLElement("img")}}-элемента, отображающие логотипы MDN.</p> -<pre class="brush: html notranslate"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> +<pre class="brush: html"><img id="object-position-1" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> <img id="object-position-2" src="https://mdn.mozillademos.org/files/12668/MDN.svg" alt="MDN Logo"/> </pre> @@ -60,7 +60,7 @@ object-position: unset; <p>CSS содержит стандартные стили для самого <code><img></code>-элемента, а также отдельные стили для обоих изображений.</p> -<pre class="brush: css notranslate">img { +<pre class="brush: css">img { width: 300px; height: 250px; border: 1px solid black; diff --git a/files/ru/web/css/overflow-wrap/index.html b/files/ru/web/css/overflow-wrap/index.html index 2b40e990a1..36a0a13508 100644 --- a/files/ru/web/css/overflow-wrap/index.html +++ b/files/ru/web/css/overflow-wrap/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/overflow-wrap <h2 id="Syntax">Syntax</h2> -<pre class="brush:css notranslate">/* Keyword values */ +<pre class="brush:css">/* Keyword values */ overflow-wrap: normal; overflow-wrap: break-word; overflow-wrap: anywhere; @@ -59,7 +59,7 @@ overflow-wrap: unset; <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><p>They say the fishing is excellent at +<pre class="brush: html"><p>They say the fishing is excellent at Lake <em class="normal">Chargoggagoggmanchauggagoggchaubunagungamaugg</em>, though I've never been there myself. (<code>normal</code>)</p> <p>They say the fishing is excellent at @@ -84,7 +84,7 @@ overflow-wrap: unset; <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">p { +<pre class="brush: css">p { width: 13em; margin: 2px; background: gold; diff --git a/files/ru/web/css/text-size-adjust/index.html b/files/ru/web/css/text-size-adjust/index.html index c66164817c..d0cb6f6c4b 100644 --- a/files/ru/web/css/text-size-adjust/index.html +++ b/files/ru/web/css/text-size-adjust/index.html @@ -36,7 +36,7 @@ translation_of: Web/CSS/text-size-adjust <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush: css notranslate">/* Text is never inflated */ +<pre class="brush: css">/* Text is never inflated */ text-size-adjust: none; /* Text may be inflated */ diff --git a/files/ru/web/css/touch-action/index.html b/files/ru/web/css/touch-action/index.html index ab1982d906..3562521aa9 100644 --- a/files/ru/web/css/touch-action/index.html +++ b/files/ru/web/css/touch-action/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/touch-action <p>Css-свойство touch-action указывает как элемент будет управляться через тачскрин (например, при помощи возможности приближения (zooming), встроенной в браузер).</p> -<pre class="brush:css no-line-numbers notranslate">/* Keyword values */ +<pre class="brush:css no-line-numbers">/* Keyword values */ touch-action: auto; touch-action: none; touch-action: pan-x; @@ -68,14 +68,14 @@ touch-action: unset; <p>The most common usage is to disable all gestures on an element (and its non-scrollable descendants) that provides its own dragging and zooming behavior – such as a map or game surface. </p> -<pre class="brush: css notranslate">#map { +<pre class="brush: css">#map { touch-action: none; } </pre> <p>Another common pattern is that of an image carousel which uses pointer events to handle horizontal panning, but doesn't want to interfere with vertical scrolling or zooming of the document.</p> -<pre class="brush: css notranslate">.image-carousel { +<pre class="brush: css">.image-carousel { width: 100%; height: 150px; touch-action: pan-y pinch-zoom; @@ -84,7 +84,7 @@ touch-action: unset; <p><strong>touch-action </strong>is also often used to completely disable the delay of <strong>click </strong>events caused by support for the<strong> </strong>double-tap to zoom gesture.</p> -<pre class="brush: css notranslate">html { +<pre class="brush: css">html { touch-action: manipulation; } </pre> diff --git a/files/ru/web/css/transform-function/rotate()/index.html b/files/ru/web/css/transform-function/rotate()/index.html index 6e5bbaa87b..2903cd7433 100644 --- a/files/ru/web/css/transform-function/rotate()/index.html +++ b/files/ru/web/css/transform-function/rotate()/index.html @@ -18,7 +18,7 @@ translation_of: Web/CSS/transform-function/rotate() <h2 id="Синтаксис">Синтаксис</h2> -<pre class="syntaxbox notranslate">rotate(<em>a</em>) +<pre class="syntaxbox">rotate(<em>a</em>) </pre> <h2 id="Значения">Значения</h2> @@ -56,12 +56,12 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -82,7 +82,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotate">Rotated</div> <div class="rotate-translate">Rotated + Translated</div> <div class="translate-rotate">Translated + Rotated</div> @@ -90,7 +90,7 @@ translation_of: Web/CSS/transform-function/rotate() <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { position: absolute; left: 40px; top: 40px; diff --git a/files/ru/web/css/transform-function/rotate3d()/index.html b/files/ru/web/css/transform-function/rotate3d()/index.html index 77c045ef84..cb26bcd71f 100644 --- a/files/ru/web/css/transform-function/rotate3d()/index.html +++ b/files/ru/web/css/transform-function/rotate3d()/index.html @@ -23,7 +23,7 @@ translation_of: Web/CSS/transform-function/rotate3d() <p>The amount of rotation created by <code>rotate3d()</code> is specified by three {{cssxref("<number>")}}s and one {{cssxref("<angle>")}}. The <code><number></code>s represent the x-, y-, and z-coordinates of the vector denoting the axis of rotation. The <code><angle></code> represents the angle of rotation; if positive, the movement will be clockwise; if negative, it will be counter-clockwise.</p> -<pre class="syntaxbox notranslate">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) +<pre class="syntaxbox">rotate3d(<em>x</em>, <em>y</em>, <em>z</em>, <em>a</em>) </pre> <h3 id="Values">Values</h3> @@ -65,12 +65,12 @@ translation_of: Web/CSS/transform-function/rotate3d() <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } @@ -94,12 +94,12 @@ div { <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Normal</div> +<pre class="brush: html"><div>Normal</div> <div class="rotated">Rotated</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">body { +<pre class="brush: css">body { perspective: 800px; } diff --git a/files/ru/web/css/transform-function/skew()/index.html b/files/ru/web/css/transform-function/skew()/index.html index dc730c4c7e..a9f6da3ac3 100644 --- a/files/ru/web/css/transform-function/skew()/index.html +++ b/files/ru/web/css/transform-function/skew()/index.html @@ -17,7 +17,7 @@ translation_of: Web/CSS/transform-function/skew() <p>Функция <code>skew()</code> задаётся одним или двумя значениями которые отображают наклон в каждом из направлений.</p> -<pre class="syntaxbox notranslate">skew(<em>ax</em>) +<pre class="syntaxbox">skew(<em>ax</em>) skew(<em>ax</em>, <em>ay</em>) </pre> @@ -59,12 +59,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; @@ -84,12 +84,12 @@ skew(<em>ax</em>, <em>ay</em>) <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div>Обычный</div> +<pre class="brush: html"><div>Обычный</div> <div class="skewed">Наклонённый</div></pre> <h4 id="CSS_2">CSS</h4> -<pre class="brush: css notranslate">div { +<pre class="brush: css">div { width: 80px; height: 80px; background-color: skyblue; diff --git a/files/ru/web/css/url()/index.html b/files/ru/web/css/url()/index.html index f628fd7873..e93de76d95 100644 --- a/files/ru/web/css/url()/index.html +++ b/files/ru/web/css/url()/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/url() <p><span class="seoSummary">The <code><strong>url()</strong></code> <a href="/en-US/docs/Web/CSS">CSS</a> function is used to include a file. The parameter is an absolute URL, a relative URL, or a data URI. The <code><strong>url()</strong></code> function can be passed as a parameter of another CSS functions, like the {{cssxref('attr()')}} function. Depending on the property for which it is a value, the resource sought can be an image, font, or a stylesheet. The url() functional notation is the value for the <url> data type.</span></p> -<pre class="brush: css no-line-numbers notranslate">/* Simple usage */ +<pre class="brush: css no-line-numbers">/* Simple usage */ url(https://example.com/images/myImg.jpg); url(data:image/png;base64,iRxVB0…); url(myFont.woff); @@ -59,7 +59,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <dl> <dt><url></dt> <dd>A url, which is a relative or absolute address, or pointer, to the web resource to be included, or a data uri, optionally in single or double quotes. Quotes are required if the URL includes parentheses, whitespace, or quotes, unless these characters are escaped, or if the address includes control characters above 0x7e. Double quotes cannot occur inside double quotes and single quotes cannot occur inside single quotes unless escaped. The following are all valid and equivalent: - <pre class="syntaxbox notranslate"><css_property>: url("https://example.com/image.png") + <pre class="syntaxbox"><css_property>: url("https://example.com/image.png") <css_property>: url('https://example.com/image.png') <css_property>: url(https://example.com/image.png)</pre> </dd> @@ -73,7 +73,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h3 id="Formal_syntax">Formal syntax</h3> -<pre class="syntaxbox notranslate">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> +<pre class="syntaxbox">url( <a href="/en-US/docs/Web/CSS/string"><string></a> <url-modifier>* )</pre> <h2 id="Examples">Examples</h2> @@ -81,7 +81,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="HTML">HTML</h4> -<pre class="brush: html notranslate"><ul> +<pre class="brush: html"><ul> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> @@ -89,7 +89,7 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <h4 id="CSS">CSS</h4> -<pre class="brush: css highlight[2] notranslate">li::after { +<pre class="brush: css highlight[2]">li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); }</pre> @@ -102,17 +102,17 @@ content: url(star.svg) url(star.svg) url(star.svg) url(star.svg) url(star.svg); <div id="color-value"> <h4 id="HTML_2">HTML</h4> -<pre class="brush: html notranslate"><div class="background"></div></pre> +<pre class="brush: html"><div class="background"></div></pre> <h4 id="CSS_2">CSS</h4> <div class="hidden"> -<pre class="brush: css notranslate">.background { +<pre class="brush: css">.background { height: 100vh; }</pre> </div> -<pre class="brush: css highlight[6] notranslate">.background { +<pre class="brush: css highlight[6]">.background { background: yellow; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3E%3Cpath d='M10 10h60' stroke='%2300F' stroke-width='5'/%3E%3Cpath d='M10 20h60' stroke='%230F0' stroke-width='5'/%3E%3Cpath d='M10 30h60' stroke='red' stroke-width='5'/%3E%3C/svg%3E"); }</pre> diff --git a/files/ru/web/css/vertical-align/index.html b/files/ru/web/css/vertical-align/index.html index 0c01095426..6ada47e5d2 100644 --- a/files/ru/web/css/vertical-align/index.html +++ b/files/ru/web/css/vertical-align/index.html @@ -7,7 +7,7 @@ translation_of: Web/CSS/vertical-align <p>Свойство <a href="/ru/docs/Web/CSS" title="CSS">CSS</a> <code>vertical-align</code> описывает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).</p> -<pre class="brush: css no-line-numbers notranslate">/* ключевые значения */ +<pre class="brush: css no-line-numbers">/* ключевые значения */ vertical-align: baseline; vertical-align: sub; vertical-align: super; @@ -37,7 +37,7 @@ vertical-align: unset; </ul> <div id="vertical-align-inline"> -<pre class="hidden brush: html notranslate"><p> +<pre class="hidden brush: html"><p> top:<img style="vertical-align:top" src="https://mdn.mozillademos.org/files/15189/star.png"/> middle:<img style="vertical-align:middle" src="https://mdn.mozillademos.org/files/15189/star.png"/> bottom:<img style="vertical-align:bottom" src="https://mdn.mozillademos.org/files/15189/star.png"/> @@ -55,7 +55,7 @@ text-bottom:<img style="vertical-align:text-bottom" src="https://mdn.mozilla </pre> -<pre class="hidden brush: css notranslate">#* { +<pre class="hidden brush: css">#* { box-sizing: border-box; } @@ -82,7 +82,7 @@ p { </ul> <div id="vertical-align-table"> -<pre class="hidden brush: html notranslate"><table> +<pre class="hidden brush: html"><table> <tr> <td style="vertical-align: baseline">baseline</td> <td style="vertical-align: top">top</td> @@ -92,7 +92,7 @@ p { <p>Существует теория, которая утверждает, что если однажды кто-нибудь доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же исчезнет, и вместо неё появится нечто ещё более причудливое и необъяснимое.</p> <p>Существует и другая теория, согласно которой это уже случилось.</p></pre> -<pre class="hidden brush: css notranslate">table { +<pre class="hidden brush: css">table { margin-left: auto; margin-right: auto; width: 80%; @@ -182,7 +182,7 @@ td { <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> +<pre class="brush: html"><div>Изображение <img src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по умолчанию.</div> <div>Изображение <img class="top" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по верхнему краю.</div> <div>Изображение <img class="bottom" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по нижнему краю.</div> <div>Изображение <img class="middle" src="https://mdn.mozillademos.org/files/12245/frame_image.svg" alt="link" width="32" height="32" /> с выравниванием по центру.</div> @@ -190,7 +190,7 @@ td { <h3 id="CSS">CSS</h3> -<pre class="brush: css notranslate">img.top { vertical-align: text-top; } +<pre class="brush: css">img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; } </pre> diff --git a/files/ru/web/css/white-space/index.html b/files/ru/web/css/white-space/index.html index 5d817d3260..10f3c3bce0 100644 --- a/files/ru/web/css/white-space/index.html +++ b/files/ru/web/css/white-space/index.html @@ -19,7 +19,7 @@ translation_of: Web/CSS/white-space <h2 id="Сводка">Сводка</h2> -<pre class="brush: css no-line-numbers notranslate">/* Ключевые значения */ +<pre class="brush: css no-line-numbers">/* Ключевые значения */ white-space: normal; white-space: nowrap; white-space: pre; @@ -128,13 +128,13 @@ white-space: unset; <h3 id="Основной_пример">Основной пример</h3> -<pre class="brush: css notranslate">code { +<pre class="brush: css">code { white-space: pre; }</pre> <h3 id="Перенос_строк_внутри_элементов_HTMLElementpre">Перенос строк внутри элементов {{HTMLElement("pre")}} </h3> -<pre class="brush: css notranslate">pre { +<pre class="brush: css">pre { word-wrap: break-word; /* IE 5.5-7 */ white-space: pre-wrap; /* текущие браузеры */ }</pre> diff --git a/files/ru/web/css/z-index/index.html b/files/ru/web/css/z-index/index.html index 389a46767f..e37c2c23ab 100644 --- a/files/ru/web/css/z-index/index.html +++ b/files/ru/web/css/z-index/index.html @@ -22,7 +22,7 @@ translation_of: Web/CSS/z-index <h2 id="Синтаксис">Синтаксис</h2> -<pre class="brush:css notranslate">/* Значение - ключевое слово */ +<pre class="brush:css">/* Значение - ключевое слово */ z-index: auto; /* <целочисленные> значения */ @@ -54,7 +54,7 @@ z-index: unset; <h3 id="HTML">HTML</h3> -<pre class="brush: html notranslate"><div class="dashed-box">Dashed box +<pre class="brush: html"><div class="dashed-box">Dashed box <span class="gold-box">Gold box</span> <span class="green-box">Green box</span> </div> @@ -62,7 +62,7 @@ z-index: unset; <h3 id="CSS">CSS</h3> -<pre class="brush: css; highlight:[3,11,19] notranslate">.dashed-box { +<pre class="brush: css; highlight:[3,11,19]">.dashed-box { position: relative; z-index: 1; border: dashed; |