mdn · queengooborg · Aug 12, 2022 · Aug 12, 2022 · Aug 12, 2022 · Aug 12, 2022
@@ -26,7 +26,7 @@ <h2 id="Example">Пример</h2>
 
 <h3 id="HTML">HTML</h3>
 
-<pre class="html prettyprint" id="htmlOutput">&lt;ul class="list"&gt;
+<pre class="html">&lt;ul class="list"&gt;
    &lt;li&gt;One&lt;/li&gt;
    &lt;li&gt;Two&lt;/li&gt;
    &lt;li&gt;Three&lt;/li&gt;

@@ -54,7 +54,7 @@ <h3 id="Официальный_синтаксис">Официальный син
 
 <h2 id="Примеры">Примеры</h2>
 
-<pre class="brush: css; highlight[7]">@font-face {
+<pre class="brush: css">@font-face {
   font-family: ExampleFont;
   src: url(/path/to/fonts/examplefont.woff) format('woff'),
        url(/path/to/fonts/examplefont.eot) format('eot');

@@ -36,17 +36,17 @@ <h2 id="Синтаксис">Синтаксис</h2>
 <h3 id="Блоки_значений_функций">Блоки значений функций</h3>
 
 <dl>
- <dt><a name="@swash"><code>@swash</code></a></dt>
+ <dt><code>@swash</code></dt>
  <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "swash()", "#swash()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции swash допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
- <dt><a name="@annotation"><code>@annotation</code></a></dt>
+ <dt><code>@annotation</code></dt>
  <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "annotation()", "#annotation()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции допускает только одно значение: <code>ident1: 2</code> действительным , но <code>ident2: 2 4</code> нет.</dd>
- <dt><a name="@ornaments"><code>@ornaments</code></a></dt>
+ <dt><code>@ornaments</code></dt>
  <dd>Устанавливает имя функции, которая будет работать с функциональной записью {{cssxref("font-variant-alternates", "ornaments()", "#ornaments()")}} для {{cssxref("font-variant-alternates")}}. Определение значения функции ornaments допускает только одно значение: <code>ident1: 2</code> является действительным, но <code>ident2: 2 4</code> нет.</dd>
- <dt><a name="@stylistic"><code>@stylistic</code></a></dt>
+ <dt><code>@stylistic</code></dt>
  <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "stylistic()", "#stylistic()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylistic feature value definition allows only one value: <code>ident1: 2</code> is valid, but <code>ident2: 2 4</code> isn't.</dd>
- <dt><a name="@styleset"><code>@styleset</code></a></dt>
+ <dt><code>@styleset</code></dt>
  <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "styleset()", "#styleset()")}} functional notation of {{cssxref("font-variant-alternates")}}. A stylset feature value definition allows an unlimited number of values: <code>ident1: 2 4 12 1</code> maps to the OpenType values <code>ss02</code>, <code>ss04</code>, <code>ss12</code>, and <code>ss01</code>. Note that values higher than <code>99</code> are valid, but don't map to any OpenType values and are ignored.</dd>
- <dt><a name="@character-variant"><code>@character-variant</code></a></dt>
+ <dt><code>@character-variant</code></dt>
  <dd>Specifies a feature name that will work with the {{cssxref("font-variant-alternates", "character-variant()", "#character-variant()")}} functional notation of {{cssxref("font-variant-alternates")}}. A character-variant feature value definition allows either one or two values: <code>ident1: 3</code> maps to <code>cv03=1</code>, and <code>ident2: 2 4</code> maps to <code>cv02=4</code>, but <code>ident2: 2 4 5</code> is invalid.</dd>
 </dl>
 

@@ -5,19 +5,19 @@
 ---
 <p>{{ CSSRef() }}</p>
 
-<h2 id="Описание" style="">Описание</h2>
+<h2 id="Описание">Описание</h2>
 
-<p style="">The <code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.</p>
+<p>The <code>@supports</code> <a href="/en/CSS" title="CSS">CSS</a> <a href="/en/CSS/At-rule" title="en/CSS/At-rule">at-rule</a> associates a set of nested statements, in a CSS block, that is delimited by curly braces, with a condition consisting of testing of CSS declarations, that is property-value pairs, combined with arbitrary conjunctions, disjunctions, and negations of them. Such a condition is called a <em>supports condition</em>.</p>
 
-<p style=""><code>@supports</code> gives CSS the ability to perform a <em>feature query</em>.</p>
+<p><code>@supports</code> gives CSS the ability to perform a <em>feature query</em>.</p>
 
 <p>The <code>@supports</code> at-rule may be used not only at the top level of a CSS, but also inside any <a href="/en/CSS/At-rule#Conditional_Group_Rules" title="en/CSS/At-rule#Conditional_Group_Rules">CSS conditional-group at-rule</a> and can be accessed via the CSS object model interface {{domxref("CSSSupportsRule")}}.</p>
 
-<h2 id="Syntax" style="">Синтаксис</h2>
+<h2 id="Syntax">Синтаксис</h2>
 
-<p style="">A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.</p>
+<p>A supports condition consists of one or several declarations combined by different logical operators. Precedence of operators can be overruled by using parentheses.</p>
 
-<h3 id="Синтаксис_объявления" style=""><span class="short_text" id="result_box" lang="ru"><span class="hps">Синтаксис объявления</span></span></h3>
+<h3 id="Синтаксис_объявления"><span class="short_text" id="result_box" lang="ru"><span class="hps">Синтаксис объявления</span></span></h3>
 
 <p>The simplest expression is a CSS declaration, that is a CSS property name followed by a value, separated by a colon. The following expression</p>
 
@@ -27,7 +27,7 @@ <h3 id="Синтаксис_объявления" style=""><span class="short_tex
 
 <p>A CSS declaration is always surrounded by parentheses.</p>
 
-<h3 id="Оператор_not" style="">Оператор not</h3>
+<h3 id="Оператор_not">Оператор not</h3>
 
 <p>The <code>not</code> operator can precede any expression to create a new expression, resulting in the negation of the original expression. The following expression</p>
 
@@ -40,13 +40,13 @@ <h3 id="Оператор_not" style="">Оператор not</h3>
 <pre class="brush:css">not ( not ( transform-origin: 2px ) )
 (display: flexbox) and ( not (display: inline-grid) )</pre>
 
-<div class="note style-wrap">
-<p style=""><strong>Предупреждение:</strong> there is no need to enclose the <code>not</code> operator between two parentheses when at the top level. To combine it with other operators, like <code>and</code> and <code>or</code>, the parentheses are required.</p>
+<div class="note">
+<p><strong>Предупреждение:</strong> there is no need to enclose the <code>not</code> operator between two parentheses when at the top level. To combine it with other operators, like <code>and</code> and <code>or</code>, the parentheses are required.</p>
 </div>
 
-<h3 id="Оператор_and" style="">Оператор and</h3>
+<h3 id="Оператор_and">Оператор and</h3>
 
-<p style="">From two expressions, the <code>and</code> operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:</p>
+<p>From two expressions, the <code>and</code> operator creates a new expression consisting in the conjunction of the two original ones; the resulting expression is true only if both of the original expressions also resolve to true. In this example, the complete expression resolves to true if and only if the two expressions are simultaneously true:</p>
 
 <pre class="brush:css">(display: table-cell) and (display: list-item)</pre>
 
@@ -58,7 +58,7 @@ <h3 id="Оператор_and" style="">Оператор and</h3>
 
 <pre class="brush:css">(display: table-cell) and ((display: list-item) and (display:run-in))</pre>
 
-<h3 id="Оператор_or" style="">Оператор or</h3>
+<h3 id="Оператор_or">Оператор or</h3>
 
 <p>From two expressions, the <code>or</code> operator creates a new expression consisting in the disjunction of the two original ones; the resulting expression is true if one, or both, of the original expressions also resolves to true. In this example, the complete expression resolves to true if at least one of the two expressions is true:</p>
 
@@ -74,17 +74,17 @@ <h3 id="Оператор_or" style="">Оператор or</h3>
 <pre class="brush:css">( transform-style: preserve-3d ) or (( -moz-transform-style: preserve-3d ) or
 (( -o-transform-style: preserve-3d ) or ( -webkit-transform-style: preserve-3d  )))</pre>
 
-<div class="note style-wrap">
-<p style=""><strong>Предупреждение</strong>: when using both <code>and</code> and <code>or</code> operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.</p>
+<div class="note">
+<p><strong>Предупреждение</strong>: when using both <code>and</code> and <code>or</code> operators, the parentheses must be used in order to define the order in which they apply. If not, the condition is invalid leading to the whole at-rule to be ignored.</p>
 </div>
 
-<h3 id="Формальный_синтаксис" style="">Формальный синтаксис</h3>
+<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
 
 {{csssyntax}}
 
-<h2 id="Примеры" style="">Примеры</h2>
+<h2 id="Примеры">Примеры</h2>
 
-<h3 id="Тестирование_заданного_свойства" style="">Тестирование заданного свойства</h3>
+<h3 id="Тестирование_заданного_свойства">Тестирование заданного свойства</h3>
 
 <pre class="brush:css;">@supports (animation-name: test) {
     … /* specific CSS applied when animations are supported unprefixed */
@@ -94,21 +94,21 @@ <h3 id="Тестирование_заданного_свойства" style="">
 }
 </pre>
 
-<h3 id="Тестирование_заданного_свойства_или_его_версии_с_префиксом" style="">Тестирование заданного свойства или его версии с префиксом</h3>
+<h3 id="Тестирование_заданного_свойства_или_его_версии_с_префиксом">Тестирование заданного свойства или его версии с префиксом</h3>
 
 <pre class="brush:css;">@supports ( (perspective: 10px) or (-moz-perspective: 10px) or (-webkit-perspective: 10px) or
             (-ms-perspective: 10px) or (-o-perspective: 10px) ) {
     … /* specific CSS applied when 3D transforms, eventually prefixed, are supported */
 }
 </pre>
 
-<h3 id="Тестирование_неподдерживаемого_или_специфического_свойства" style="">Тестирование неподдерживаемого или специфического свойства</h3>
+<h3 id="Тестирование_неподдерживаемого_или_специфического_свойства">Тестирование неподдерживаемого или специфического свойства</h3>
 
 <pre class="brush:css;">@supports not ((text-align-last:justify) or (-moz-text-align-last:justify) ){
     … /* specific CSS applied to simulate text-align-last:justify */
 }</pre>
 
-<h2 id="Спецификации" style="">Спецификации</h2>
+<h2 id="Спецификации">Спецификации</h2>
 
 <table class="standard-table">
  <thead>
@@ -119,19 +119,19 @@ <h2 id="Спецификации" style="">Спецификации</h2>
   </tr>
  </thead>
  <tbody>
-  <tr style="">
+  <tr>
    <td>{{ SpecName('CSS3 Conditional', '#at-supports', '@supports') }}</td>
-   <td style="">{{ Spec2('CSS3 Conditional') }}</td>
-   <td style="">Первоначальное определение.</td>
+   <td>{{ Spec2('CSS3 Conditional') }}</td>
+   <td>Первоначальное определение.</td>
   </tr>
  </tbody>
 </table>
 
-<h2 id="Browser_compatibility" style="">Совместимость с браузерами</h2>
+<h2 id="Browser_compatibility">Совместимость с браузерами</h2>
 
 <p>{{Compat}}</p>
 
-<h2 id="Смотрите_также" style="">Смотрите также</h2>
+<h2 id="Смотрите_также">Смотрите также</h2>
 
 <ul>
  <li>The CSSOM class {{ domxref("CSSSupportsRule") }}, and the {{ domxref("CSS.supports") }} method that allows to perform the same check via JavaScript.</li>

@@ -49,8 +49,7 @@ <h3 id="Дескриптор">Дескриптор</h3>
  <dt><a href="/en-US/docs/Web/CSS/@viewport/user-zoom"><code>user-zoom</code></a></dt>
  <dd>Управляет тем, должен ли пользователь иметь возможность изменять коэффициент масштабирования.</dd>
  <dt><a href="/en-US/docs/Web/CSS/@viewport/orientation"><code>orientation</code></a></dt>
- <dt>Управляет ориентацией документа.</dt>
- <dd></dd>
+ <dd>Управляет ориентацией документа.</dd>
 </dl>
 
 <h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
@@ -59,7 +58,7 @@ <h3 id="Формальный_синтаксис">Формальный синта
 
 <h2 id="Пример">Пример:</h2>
 
-<pre class="eval" style="font-size: 14px;">@viewport {
+<pre class="brush: css">@viewport {
   min-width: 640px;
   max-width: 800px;
 }

@@ -26,7 +26,7 @@ <h3 id="Базовый_пример">Базовый пример</h3>
 &lt;input class="focus-visible-only" value=":focus-visible only"&gt;&lt;br&gt;
 &lt;button class="focus-visible-only"&gt;:focus-visible only&lt;/button&gt;</pre>
 
-<pre class="brush: css highlight[9]">input, button {
+<pre class="brush: css">input, button {
   margin: 10px;
 }
 
@@ -47,7 +47,7 @@ <h3 id="Выборочное_отображение_индикатора_фок
 
 <pre class="brush: html">&lt;custom-button tabindex="0" role="button"&gt;Click Me&lt;/custom-button&gt;</pre>
 
-<pre class="brush: css highlight[13, 19]">custom-button {
+<pre class="brush: css">custom-button {
   display: inline-block;
   margin: 10px;
 }

@@ -36,7 +36,7 @@ <h3 id="HTML">HTML</h3>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css highlight[7]">form {
+<pre class="brush: css">form {
   border: 1px solid;
   color: gray;
   padding: 4px;

@@ -32,7 +32,7 @@ <h3 id="HTML">HTML</h3>
 
 <h3 id="CSS">CSS</h3>
 
-<pre class="brush: css; highlight:[5]">li {
+<pre class="brush: css">li {
     list-style: none;
     margin-bottom: 1em;
 }

@@ -47,7 +47,7 @@ <h4 id="HTML">HTML</h4>
 
 <h4 id="CSS">CSS</h4>
 
-<pre class="brush: css; hightlight[5]">input:indeterminate + label {
+<pre class="brush: css;">input:indeterminate + label {
   background: lime;
 }
 </pre>
@@ -72,7 +72,7 @@ <h4 id="HTML_2">HTML</h4>
 
 <h4 id="CSS_2">CSS</h4>
 
-<pre class="brush: css; hightlight[5]">progress {
+<pre class="brush: css;">progress {
   margin: 4px;
 }
 

@@ -22,7 +22,7 @@ <h2 id="Пример">Пример</h2>
 <div id="example">
 <h3 id="HTML">HTML</h3>
 
-<pre class="brush: html; highlight:[3]">&lt;form action="" id="form1"&gt;
+<pre class="brush: html">&lt;form action="" id="form1"&gt;
     &lt;ul&gt;Приминаются значения между 1 и 10.
         &lt;li&gt;
             &lt;input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12"&gt;

@@ -36,7 +36,7 @@ <h4 id="CSS">CSS</h4>
 }</pre>
 </div>
 
-<pre class="brush: css; highlight[6]">input {
+<pre class="brush: css">input {
   border: 2px solid black;
   padding: 3px;
 }

@@ -11,7 +11,7 @@ <h2 id="Описание">Описание</h2>
 
 <p>CSS <a href="/ru/docs/Web/CSS/Псевдо-классы" title="Pseudo-classes">псевдокласс</a> <code>:visited</code> позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило <code>:visited</code> после правила <code>:link</code> до правил <code>:hover</code> и <code>:active</code>, как определено <em>LVHA-порядком</em>: <code>:link</code> — <code>:visited</code> — <code>:hover</code> — <code>:active</code>.</p>
 
-<div class="note style-wrap">
+<div class="note">
 <p><strong>Замечание: </strong>Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ cssxref("color") }}, {{ cssxref("background-color") }}, {{ cssxref("border-color") }}, {{ cssxref("border-bottom-color") }}, {{ cssxref("border-left-color") }}, {{ cssxref("border-right-color") }}, {{ cssxref("border-top-color") }}, {{ cssxref("outline-color") }}, {{ cssxref("column-rule-color") }}, <code>fill</code> и <code>stroke</code>. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан<code>0</code>, то в этом случае будет использоваться цвет непосещённых ссылок.</p>
 
 <p>Несмотря на то, что цвет может меняться, метод <code>getComputedStyle</code> наврёт и всегда будет давать значение цвета непосещённых ссылок.</p>