Браузеры, такие как Firefox, Internet Explorer, Safari, Opera или Chrome, применяют соответствующий стиль, когда курсор (указатель мыши) наводится на элемент.
-
-В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.
-
-
+```
+
+#### CSS
+
+```css
+progress {
+ margin: 4px;
+}
+
+progress:indeterminate {
+ opacity: 0.5;
+ background-color: lightgray;
+ box-shadow: 0 0 2px 1px red;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Полоса_прогресса', 'auto', 30)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/_colon_invalid/index.html b/files/ru/web/css/_colon_invalid/index.html
deleted file mode 100644
index e1cc78df754596..00000000000000
--- a/files/ru/web/css/_colon_invalid/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: ':invalid'
-slug: 'Web/CSS/:invalid'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:invalid'
----
-{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :invalid находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых не проходит валидацию , в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.
-
-По умолчанию, Gecko не применяет стили к псевдоклассу :invalid. Однако, применяет стили (красное "свечение", используя свойство {{ Cssxref("box-shadow") }}) к псевдоклассу {{ Cssxref(":-moz-ui-invalid") }}, который применяется в подгруппе случаев для :invalid.
-
-Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.
-
-:invalid {
- box-shadow: none;
-}
-
-:-moz-submit-invalid {
- box-shadow: none;
-}
-
-:-moz-ui-invalid {
- box-shadow:none;
-}
-
-
-Замечания
-
-Радиокнопки
-
-Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом name) имеет атрибут required, псевдокласс :invalid применяется ко всем из них, если ни одна из кнопок группы не выбрана.
-
-Пример
-
-Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
-
-HTML
-
-<form>
- <label>Введите URL:</label>
- <input type="url" />
- <br />
- <br />
- <label>Введите эл. почту:</label>
- <input type="email" required/>
-</form>
-
-CSS
-
-input:invalid {
- background-color: #ffdddd;
-}
-
-form:invalid {
- border: 5px solid #ffdddd;
-}
-
-input:valid {
- background-color: #ddffdd;
-}
-
-form:valid {
- border: 5px solid #ddffdd;
-}
-
-input:required {
- border-color: #800000;
- border-width: 3px;
-}
-
-{{ EmbedLiveSample('Example2',600,150) }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ cssxref(":valid") }}
- {{ cssxref(":-moz-submit-invalid") }}
- {{ cssxref(":required") }}
- {{ cssxref(":optional") }}
-
-
-{{ languages( { "fr": "fr/CSS/:invalid" }) }}
diff --git a/files/ru/web/css/_colon_invalid/index.md b/files/ru/web/css/_colon_invalid/index.md
new file mode 100644
index 00000000000000..ff8f8c9798a655
--- /dev/null
+++ b/files/ru/web/css/_colon_invalid/index.md
@@ -0,0 +1,97 @@
+---
+title: ':invalid'
+slug: Web/CSS/:invalid
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:invalid
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:invalid` находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых не проходит [валидацию](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation "en/HTML/HTML5/Constraint_validation"), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.
+
+По умолчанию, Gecko не применяет стили к псевдоклассу `:invalid`. Однако, применяет стили (красное "свечение", используя свойство {{ Cssxref("box-shadow") }}) к псевдоклассу {{ Cssxref(":-moz-ui-invalid") }}, который применяется в подгруппе случаев для `:invalid`.
+
+Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.
+
+```css
+:invalid {
+ box-shadow: none;
+}
+
+:-moz-submit-invalid {
+ box-shadow: none;
+}
+
+:-moz-ui-invalid {
+ box-shadow:none;
+}
+```
+
+## Замечания
+
+#### Радиокнопки
+
+Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом `name`) имеет атрибут `required`, псевдокласс `:invalid` применяется ко всем из них, если ни одна из кнопок группы не выбрана.
+
+## Пример
+
+Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
+
+### HTML
+
+```html
+
+```
+
+### CSS
+
+```css
+input:invalid {
+ background-color: #ffdddd;
+}
+
+form:invalid {
+ border: 5px solid #ffdddd;
+}
+
+input:valid {
+ background-color: #ddffdd;
+}
+
+form:valid {
+ border: 5px solid #ddffdd;
+}
+
+input:required {
+ border-color: #800000;
+ border-width: 3px;
+}
+```
+
+{{ EmbedLiveSample('Example2',600,150) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ cssxref(":valid") }}
+- {{ cssxref(":-moz-submit-invalid") }}
+- {{ cssxref(":required") }}
+- {{ cssxref(":optional") }}
+
+{{ languages( { "fr": "fr/CSS/:invalid" }) }}
diff --git a/files/ru/web/css/_colon_is/index.html b/files/ru/web/css/_colon_is/index.html
deleted file mode 100644
index 1e9f171d3d383d..00000000000000
--- a/files/ru/web/css/_colon_is/index.html
+++ /dev/null
@@ -1,234 +0,0 @@
----
-title: ':is() (:matches(), :any())'
-slug: 'Web/CSS/:is'
-translation_of: 'Web/CSS/:is'
----
-{{CSSRef}}{{SeeCompatTable}}
-
-
-
-:is()псевдокласс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.
-
-Заметьте, что в данный момент браузеры поддерживают её функциональность как :matches(), или даже как более старый, префиксный псевдокласс — :any(), включая старые версии Chrome, Firefox, и Safari. :any() работает точно таким же образом как и :matches()/:is(), за исключением того, что :any() требует постановку префиксов и не поддерживает комплексные селекторы .
-
-/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
-:is(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-/* Пример приведённый выше эквивалентен следующему */
-header p:hover,
-main p:hover,
-footer p:hover {
- color: red;
- cursor: pointer;
-}
-
-/* Обратно-совместимая версия с:-*-any() и :matches()
- (Это невозможно сгруппировать селекторы в одно правило,
- так как присутствие одного неверного селектора аннулирует все правило.) */
-:-webkit-any(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-:-moz-any(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-:matches(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-
-Синтаксис
-
-{{CSSSyntax}}
-
-Примеры
-
-Кроссбраузерный пример
-
-<header>
- <p>Это мой параграф в шапке</p>
-</header>
-
-<main>
- <ul>
- <li><p>Это первый</p><p>пункт списка</p></li>
- <li><p>Это второй</p><p>пункт списка</p></li>
- </ul>
-</main>
-
-<footer>
- <p>Это мой параграф в подвале</p>
-</footer>
-
-:-webkit-any(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-:-moz-any(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-:matches(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-:is(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-
-let matchedItems;
-
-try {
- matchedItems = document.querySelectorAll(':is(header, main, footer) p');
-} catch(e) {
- try {
- matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
- } catch(e) {
- try {
- matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
- } catch(e) {
- try {
- matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
- } catch(e) {
- console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
- }
- }
- }
-}
-
-matchedItems.forEach(applyHandler);
-
-function applyHandler(elem) {
- elem.addEventListener('click', function(e) {
- alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
- });
-}
-
-{{EmbedLiveSample("Кроссбраузерный_пример", "100%", 300)}}
-
-Упрощение списка селекторов
-
-Псевдо-класс :is() может великолепно упрощать ваши CSS селекторы. К примеру, следующий 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,
-ul ol ul, ul ul ul, ul menu ul, ul dir ul,
-ul ol menu, ul ul menu, ul menu menu, ul dir menu,
-ul ol dir, ul ul dir, ul menu dir, ul dir dir,
-menu ol ul, menu ul ul, menu menu ul, menu dir ul,
-menu ol menu, menu ul menu, menu menu menu, menu dir menu,
-menu ol dir, menu ul dir, menu menu dir, menu dir dir,
-dir ol ul, dir ul ul, dir menu ul, dir dir ul,
-dir ol menu, dir ul menu, dir menu menu, dir dir menu,
-dir ol dir, dir ul dir, dir menu dir, dir dir dir {
- list-style-type: square;
-}
-
-
-... можно заменить на:
-
-/* 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 {
- list-style-type: square;
-}
-
-Упрощение селекторов разделов
-
-Псевдо-класс :is() особенно полезен при работе с заголовками и разделами HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без :is(), стилизовать их, чтобы они соответствовали друг друг, может быть не просто.
-
-К примеру, без :is(), стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:
-
-/* Уровень 0 */
-h1 {
- font-size: 30px;
-}
-/* Уровень 1 */
-section h1, article h1, aside h1, nav h1 {
- font-size: 25px;
-}
-/* Уровень 2 */
-section section h1, section article h1, section aside h1, section nav h1,
-article section h1, article article h1, article aside h1, article nav h1,
-aside section h1, aside article h1, aside aside h1, aside nav h1,
-nav section h1, nav article h1, nav aside h1, nav nav h1 {
- font-size: 20px;
-}
-/* Уровень 3 */
-/* ... даже не смей думать об этом! */
-
-
-Используя :is(), как видно, это гораздо легче:
-
-/* Уровень 0 */
-h1 {
- font-size: 30px;
-}
-/* Уровень 1 */
-:is(section, article, aside, nav) h1 {
- font-size: 25px;
-}
-/* Уровень 2 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
- font-size: 20px;
-}
-/* Уровень 3 */
-:is(section, article, aside, nav)
-:is(section, article, aside, nav)
-:is(section, article, aside, nav) h1 {
- font-size: 15px;
-}
-
-Как избежать аннулирования списка селекторов
-
-В отличие от списка селекторов , псевдокласс :is() не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.
-
-:is(:valid, :unsupported) {
- ...
-}
-
-Будет по прежнему определяться правильно и соответствовать :valid даже в браузерах, которые не поддерживают :unsupported, в то время как:
-
-:valid, :unsupported {
- ...
-}
-
-Будет проигнорировано браузерами, которые не поддерживают :unsupported даже если они поддерживают :valid.
-
-Разница между :is() и :where()
-
-Разница между этими двумя, в том что :is() учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время :where() примере на странице документации :where() .
-
-Спецификации
-
-{{Specifications}}
-
-Браузерная совместимость
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_is/index.md b/files/ru/web/css/_colon_is/index.md
new file mode 100644
index 00000000000000..0436d8ba150498
--- /dev/null
+++ b/files/ru/web/css/_colon_is/index.md
@@ -0,0 +1,244 @@
+---
+title: ':is() (:matches(), :any())'
+slug: Web/CSS/:is
+translation_of: Web/CSS/:is
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+> **Примечание:** `:matches()` был переименован в `:is()` в [CSSWG issue #3258](https://github.com/w3c/csswg-drafts/issues/3258).
+
+**`:is()`** это функция [псевдокласс CSS](/ru/docs/Web/CSS) принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.
+
+Заметьте, что в данный момент браузеры поддерживают её функциональность как `:matches()`, или даже как более старый, префиксный псевдокласс — `:any()`, включая старые версии Chrome, Firefox, и Safari. `:any()` работает точно таким же образом как и `:matches()`/`:is()`, за исключением того, что `:any()` требует постановку префиксов и не поддерживает [комплексные селекторы](/ru/docs/Learn/CSS/Building_blocks/Селекторы).
+
+```css
+/* Выбирает какой-либо абзац в шапке, основной части или подвале, который зависал */
+:is(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+/* Пример приведённый выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+/* Обратно-совместимая версия с:-*-any() и :matches()
+ (Это невозможно сгруппировать селекторы в одно правило,
+ так как присутствие одного неверного селектора аннулирует все правило.) */
+:-webkit-any(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+:-moz-any(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+:matches(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+```
+
+## Синтаксис
+
+{{CSSSyntax}}
+
+## Примеры
+
+### Кроссбраузерный пример
+
+```html
+
+ Это мой параграф в шапке
+
+
+
+
+ Это первый
пункт списка
Это второй
пункт списка
+
+
+
+```
+
+```css
+:-webkit-any(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+:-moz-any(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+:matches(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+:is(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+```
+
+```js
+let matchedItems;
+
+try {
+ matchedItems = document.querySelectorAll(':is(header, main, footer) p');
+} catch(e) {
+ try {
+ matchedItems = document.querySelectorAll(':matches(header, main, footer) p');
+ } catch(e) {
+ try {
+ matchedItems = document.querySelectorAll(':-webkit-any(header, main, footer) p');
+ } catch(e) {
+ try {
+ matchedItems = document.querySelectorAll(':-moz-any(header, main, footer) p');
+ } catch(e) {
+ console.log('Your browser doesn\'t support :is(), :matches(), or :any()');
+ }
+ }
+ }
+}
+
+matchedItems.forEach(applyHandler);
+
+function applyHandler(elem) {
+ elem.addEventListener('click', function(e) {
+ alert('This paragraph is inside a ' + e.target.parentNode.nodeName);
+ });
+}
+```
+
+{{EmbedLiveSample("Кроссбраузерный_пример", "100%", 300)}}
+
+### Упрощение списка селекторов
+
+Псевдо-класс `:is()` может великолепно упрощать ваши CSS селекторы. К примеру, следующий CSS:
+
+```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,
+ul ol ul, ul ul ul, ul menu ul, ul dir ul,
+ul ol menu, ul ul menu, ul menu menu, ul dir menu,
+ul ol dir, ul ul dir, ul menu dir, ul dir dir,
+menu ol ul, menu ul ul, menu menu ul, menu dir ul,
+menu ol menu, menu ul menu, menu menu menu, menu dir menu,
+menu ol dir, menu ul dir, menu menu dir, menu dir dir,
+dir ol ul, dir ul ul, dir menu ul, dir dir ul,
+dir ol menu, dir ul menu, dir menu menu, dir dir menu,
+dir ol dir, dir ul dir, dir menu dir, dir dir dir {
+ list-style-type: square;
+}
+```
+
+... можно заменить на:
+
+```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 {
+ list-style-type: square;
+}
+```
+
+### Упрощение селекторов разделов
+
+Псевдо-класс `:is()` особенно полезен при работе с [заголовками и разделами](/ru/docs/Web/Guide/HTML/Sections_and_Outlines_of_an_HTML5_document "Sections and Outlines of an HTML5 document") HTML5. C тех пор как {{HTMLElement("section")}}, {{HTMLElement("article")}}, {{HTMLElement("aside")}}, и {{HTMLElement("nav")}} обычно используют вместе, без `:is()`, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.
+
+К примеру, без `:is()`, стилизовать все {{HTMLElement("h1")}} элементы на разных уровнях может бы очень сложно:
+
+```css
+/* Уровень 0 */
+h1 {
+ font-size: 30px;
+}
+/* Уровень 1 */
+section h1, article h1, aside h1, nav h1 {
+ font-size: 25px;
+}
+/* Уровень 2 */
+section section h1, section article h1, section aside h1, section nav h1,
+article section h1, article article h1, article aside h1, article nav h1,
+aside section h1, aside article h1, aside aside h1, aside nav h1,
+nav section h1, nav article h1, nav aside h1, nav nav h1 {
+ font-size: 20px;
+}
+/* Уровень 3 */
+/* ... даже не смей думать об этом! */
+```
+
+Используя `:is()`, как видно, это гораздо легче:
+
+```css
+/* Уровень 0 */
+h1 {
+ font-size: 30px;
+}
+/* Уровень 1 */
+:is(section, article, aside, nav) h1 {
+ font-size: 25px;
+}
+/* Уровень 2 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+ font-size: 20px;
+}
+/* Уровень 3 */
+:is(section, article, aside, nav)
+:is(section, article, aside, nav)
+:is(section, article, aside, nav) h1 {
+ font-size: 15px;
+}
+```
+
+### Как избежать аннулирования списка селекторов
+
+В отличие от [списка селекторов](/ru/docs/Web/CSS/Selector_list), псевдокласс `:is()` не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.
+
+```css
+:is(:valid, :unsupported) {
+ ...
+}
+```
+
+Будет по прежнему определяться правильно и соответствовать `:valid` даже в браузерах, которые не поддерживают `:unsupported`, в то время как:
+
+```css
+:valid, :unsupported {
+ ...
+}
+```
+
+Будет проигнорировано браузерами, которые не поддерживают `:unsupported` даже если они поддерживают `:valid`.
+
+### Разница между :is() и :where()
+
+Разница между этими двумя, в том что `:is()` учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время [`:where()`](/en-US/docs/Web/CSS/:where) имеет значение спецификации равное 0. Это можно увидеть на [примере на странице документации `:where()` ](/ru/docs/Web/CSS/:where#Examples).
+
+## Спецификации
+
+{{Specifications}}
+
+## Браузерная совместимость
+
+{{Compat}}
+
+## Смотрите также
+
+- {{CSSxRef(":where", ":where()")}} {{Experimental_Inline}} - Like `:is()`, but with 0 [specificity](/ru/docs/Web/CSS/Specificity).
+- [Список селекторов](/ru/docs/Web/CSS/Selector_list)
+- [Веб компоненты](/ru/docs/Web/Web_Components)
diff --git a/files/ru/web/css/_colon_lang/index.html b/files/ru/web/css/_colon_lang/index.html
deleted file mode 100644
index 483f96409611f0..00000000000000
--- a/files/ru/web/css/_colon_lang/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
----
-title: ':lang()'
-slug: 'Web/CSS/:lang'
-tags:
- - CSS
- - Псевдо-класс
-translation_of: 'Web/CSS/:lang'
----
-{{CSSRef}}
-
-Псевдо-класс CSS :lang()
-
-/* Выбирает все <p>, что на английском (en) */
-p:lang(en) {
- quotes: '\201C' '\201D' '\2018' '\2019';
-}
-
-
-
Примечание: В HTML язык определяется комбинацией атрибута {{htmlattrxref("lang")}}, элемента {{HTMLElement("meta")}} и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.
-
Синтаксис
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Параметр
-
-
- <language-code>{{cssxref("<string>")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации HTML .
-
-
-Пример
-
-In this example, the :lang() pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using child combinators . Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.
-
-HTML
-
-<div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
-<div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
-<div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
-
-
-CSS
-
-:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
-:lang(fr) > q { quotes: '« ' ' »'; }
-:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
-
-
-Результат
-
-{{EmbedLiveSample('Пример', 350)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Также смотрите
-
-
diff --git a/files/ru/web/css/_colon_lang/index.md b/files/ru/web/css/_colon_lang/index.md
new file mode 100644
index 00000000000000..dca9dd98a4499c
--- /dev/null
+++ b/files/ru/web/css/_colon_lang/index.md
@@ -0,0 +1,69 @@
+---
+title: ':lang()'
+slug: Web/CSS/:lang
+tags:
+ - CSS
+ - Псевдо-класс
+translation_of: Web/CSS/:lang
+---
+{{CSSRef}}
+
+[Псевдо-класс](/ru/docs/Web/CSS/Pseudo-classes) [CSS](/ru/docs/Web/CSS) **`:lang()`** выбирает элементы основываясь на языке, на котором они определены.
+
+```css
+/* Выбирает все , что на английском (en) */
+p:lang(en) {
+ quotes: '\201C' '\201D' '\2018' '\2019';
+}
+```
+
+> **Примечание:** В HTML язык определяется комбинацией атрибута {{htmlattrxref("lang")}}, элемента {{HTMLElement("meta")}} и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.
+
+## Синтаксис
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+### Параметр
+
+- ``
+ - : {{cssxref("<string>")}}, представляющая язык, который вы хотите отобрать. Допустимые значения указаны в документации [HTML](/ru/docs/Web/HTML).
+
+## Пример
+
+In this example, the `:lang()` pseudo-class is used to match the parents of quote elements ({{htmlElement("q")}}) using [child combinators](/ru/docs/Web/CSS/Child_selectors). Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that {{glossary("Unicode")}} values are used to specify some of the special quote characters.
+
+### HTML
+
+```html
+This English quote has a nested quote inside.
+This French quote has a nested quote inside.
+This German quote has a nested quote inside.
+```
+
+### CSS
+
+```css
+:lang(en) > q { quotes: '\201C' '\201D' '\2018' '\2019'; }
+:lang(fr) > q { quotes: '« ' ' »'; }
+:lang(de) > q { quotes: '»' '«' '\2039' '\203A'; }
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример', 350)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Также смотрите
+
+- Language-related pseudo-classes: {{cssxref(":lang")}}, {{cssxref(":dir")}}
+- HTML {{htmlattrxref("lang")}} attribute
+- [BCP 47 - Tags for Identifying Languages](https://tools.ietf.org/html/bcp47)
diff --git a/files/ru/web/css/_colon_last-child/index.html b/files/ru/web/css/_colon_last-child/index.html
deleted file mode 100644
index 533feb5b7cbea9..00000000000000
--- a/files/ru/web/css/_colon_last-child/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: ':last-child'
-slug: 'Web/CSS/:last-child'
-translation_of: 'Web/CSS/:last-child'
----
-{{CSSRef}}
-
-Описание
-
-CSS псевдокласс :last-child находит любой элемент, являющийся последним в его родителе.
-
-Синтаксис
-
-element:last-child { style properties }
-
-Пример
-
-HTML
-
-<ul>
- <li>Этот элемент не лаймовый.</li>
- <li>И этот тоже.</li>
- <li>А этот да! :)</li>
-</ul>
-
-CSS
-
-li:last-child {
- background-color: lime;
-}
-
-{{EmbedLiveSample('Пример', '100%', 100)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{cssxref(":first-child")}}
- {{cssxref(":nth-child")}}
- {{cssxref(":last-of-type")}}
-
diff --git a/files/ru/web/css/_colon_last-child/index.md b/files/ru/web/css/_colon_last-child/index.md
new file mode 100644
index 00000000000000..f32638ee620707
--- /dev/null
+++ b/files/ru/web/css/_colon_last-child/index.md
@@ -0,0 +1,50 @@
+---
+title: ':last-child'
+slug: Web/CSS/:last-child
+translation_of: Web/CSS/:last-child
+---
+{{CSSRef}}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Pseudo-classes) `:last-child` находит любой элемент, являющийся последним в его родителе.
+
+## Синтаксис
+
+ element:last-child { style properties }
+
+## Пример
+
+### HTML
+
+```html
+
+ Этот элемент не лаймовый.
+ И этот тоже.
+ А этот да! :)
+
+```
+
+### CSS
+
+```css
+li:last-child {
+ background-color: lime;
+}
+```
+
+{{EmbedLiveSample('Пример', '100%', 100)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref(":first-child")}}
+- {{cssxref(":nth-child")}}
+- {{cssxref(":last-of-type")}}
diff --git a/files/ru/web/css/_colon_last-of-type/index.html b/files/ru/web/css/_colon_last-of-type/index.html
deleted file mode 100644
index 42d23a16ee361a..00000000000000
--- a/files/ru/web/css/_colon_last-of-type/index.html
+++ /dev/null
@@ -1,90 +0,0 @@
----
-title: ':last-of-type'
-slug: 'Web/CSS/:last-of-type'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоклассы
-translation_of: 'Web/CSS/:last-of-type'
----
-{{CSSRef}}
-
-CSS псевдокласс :last-of-type
-
-/* Выбирает <p>, являющийся последним элементом
- среди элементов своего типа среди своих соседей */
-p:last-of-type {
- color: lime;
-}
-
-
-
Примечание : В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.
-
Синтаксис
-
-{{csssyntax}}
-
-Пример
-
-Стилизация последнего параграфа
-
-HTML
-
-<h2>Заголовок</h2>
-<p>Параграф 1</p>
-<p>Параграф 2</p>
-
-CSS
-
-p:last-of-type {
- color: red;
- font-style: italic;
-}
-
-Результат
-
-{{EmbedLiveSample('Стилизация_последнего_параграфа')}}
-
-Вложенные элементы
-
-Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (*).
-
-HTML
-
-<article>
- <div>Этот `div` первый.</div>
- <div>Этот <span>вложенный `span` является последним</span>!</div>
- <div>Этот <em>вложенный `em` первый</em>, а этот <em>вложенный `em` последний</em>!</div>
- <b>Этот `b` будет выбран!</b>
- <div>Это последний `div`!</div>
-</article>
-
-
-CSS
-
-article :last-of-type {
- background-color: pink;
-}
-
-Результат
-
-{{EmbedLiveSample('Вложенные_элементы', 500)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}
-
diff --git a/files/ru/web/css/_colon_last-of-type/index.md b/files/ru/web/css/_colon_last-of-type/index.md
new file mode 100644
index 00000000000000..f755f3f57b03f9
--- /dev/null
+++ b/files/ru/web/css/_colon_last-of-type/index.md
@@ -0,0 +1,93 @@
+---
+title: ':last-of-type'
+slug: Web/CSS/:last-of-type
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоклассы
+translation_of: Web/CSS/:last-of-type
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/CSS "CSS") [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") **`:last-of-type`** находит последнего потомка с заданным тегом в списке детей родительского элемента.
+
+```css
+/* Выбирает , являющийся последним элементом
+ среди элементов своего типа среди своих соседей */
+p:last-of-type {
+ color: lime;
+}
+```
+
+> **Примечание:** В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### Стилизация последнего параграфа
+
+#### HTML
+
+```html
+
Заголовок
+Параграф 1
+Параграф 2
+```
+
+#### CSS
+
+```css
+p:last-of-type {
+ color: red;
+ font-style: italic;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Стилизация_последнего_параграфа')}}
+
+### Вложенные элементы
+
+Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается [универсальный селектор](/ru/docs/Web/CSS/Universal_selectors) (`*`).
+
+#### HTML
+
+```html
+
+ Этот `div` первый.
+ Этот вложенный `span` является последним !
+ Этот вложенный `em` первый , а этот вложенный `em` последний !
+ Этот `b` будет выбран!
+ Это последний `div`!
+
+```
+
+#### CSS
+
+```css
+article :last-of-type {
+ background-color: pink;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Вложенные_элементы', 500)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref(":last-child")}}, {{Cssxref(":nth-last-of-type")}}
diff --git a/files/ru/web/css/_colon_left/index.html b/files/ru/web/css/_colon_left/index.html
deleted file mode 100644
index e8c9a1ffbcdd92..00000000000000
--- a/files/ru/web/css/_colon_left/index.html
+++ /dev/null
@@ -1,49 +0,0 @@
----
-title: ':left'
-slug: 'Web/CSS/:left'
-tags:
- - Вёрстка
- - Псевдоклассы
-translation_of: 'Web/CSS/:left'
----
-{{ CSSRef() }}
-
-Псевдокласс CSS :leftat-правилом {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.
-
-/* Выбирает все левые страницы при печати */
-@page :left {
- margin: 2in 3in;
-}
-
-Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page {{Cssxref(":right")}} ; если первая страница имеет основное направление справа налево, то это будет страница с page :left.
-
-
-
Примечание: Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, и{{ Cssxref("background") }} . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.
-
Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Выставляем отступы для левых страниц
-
-@page :left {
- margin: 2in 3in;
-}
-
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-{{Compat}}
-
-Смотрите также
-
-
- {{ Cssxref("@page") }}
- Другие псевдоклассы, связанные с @page: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}
-
diff --git a/files/ru/web/css/_colon_left/index.md b/files/ru/web/css/_colon_left/index.md
new file mode 100644
index 00000000000000..f6fd03f7dfef7e
--- /dev/null
+++ b/files/ru/web/css/_colon_left/index.md
@@ -0,0 +1,49 @@
+---
+title: ':left'
+slug: Web/CSS/:left
+tags:
+ - Вёрстка
+ - Псевдоклассы
+translation_of: Web/CSS/:left
+---
+{{ CSSRef() }}
+
+[Псевдокласс](/ru/docs/Web/CSS/Pseudo-classes) [CSS](/ru/docs/Web/CSS) **`:left`** используется с [at-правилом](/ru/docs/Web/CSS/At-rule) {{cssxref("@page")}}, предоставляет все левые страницы печатного документа.
+
+```css
+/* Выбирает все левые страницы при печати */
+@page :left {
+ margin: 2in 3in;
+}
+```
+
+Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page {{Cssxref(":right")}} ; если первая страница имеет основное направление справа налево, то это будет страница с page `:left`.
+
+> **Примечание:** Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: {{ Cssxref("margin") }}, {{ Cssxref("padding") }}, {{ Cssxref("border") }}, и{{ Cssxref("background") }} . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Выставляем отступы для левых страниц
+
+```css
+@page :left {
+ margin: 2in 3in;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ Cssxref("@page") }}
+- Другие псевдоклассы, связанные с @page: {{ Cssxref(":first") }}, {{ Cssxref(":right") }}
diff --git a/files/ru/web/css/_colon_link/index.html b/files/ru/web/css/_colon_link/index.html
deleted file mode 100644
index beb3e056410c79..00000000000000
--- a/files/ru/web/css/_colon_link/index.html
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: ':link'
-slug: 'Web/CSS/:link'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:link'
----
-{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :link позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа {{ cssxref(":hover") }}, {{ cssxref(":active") }} или {{ cssxref(":visited") }}. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила :link до других, как определено LVHA-порядком : :link — :visited — :hover — :active. Псевдо-класс {{ cssxref(":focus") }} обычно размещается прямо перед или сразу после :hover, в зависимости от ожидаемого эффекта.
-
-
-
Замечание : Используйте {{cssxref(":any-link")}} чтобы выбрать ссылку, независимо от того, была она посещена или нет.
-
Примеры
-
-a:link {color: slategray;}
-.external:link {background-color: lightblue;}
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }}
- {{ Spec2('HTML WHATWG') }}
-
-
- {{ SpecName('CSS4 Selectors', '#link', ':link') }}
- {{ Spec2('CSS4 Selectors') }}
- Без изменений.
-
-
- {{ SpecName('CSS3 Selectors', '#link', ':link') }}
- {{ Spec2('CSS3 Selectors') }}
- Без изменений
-
-
- {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }}
- {{ Spec2('CSS2.1') }}
- Появилось ограничение применять только для элемента {{ HTMLElement("a") }}.
-
-
- {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }}
- {{ Spec2('CSS1') }}
- Изначальное определение.
-
-
-
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}
-
diff --git a/files/ru/web/css/_colon_link/index.md b/files/ru/web/css/_colon_link/index.md
new file mode 100644
index 00000000000000..319c90622ca0d9
--- /dev/null
+++ b/files/ru/web/css/_colon_link/index.md
@@ -0,0 +1,39 @@
+---
+title: ':link'
+slug: Web/CSS/:link
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:link
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:link` позволяет вам выбирать ссылки внутри элементов. Он выберет любую ссылку, которая ещё не была посещена, даже те, которые уже стилизованы, используя селекторы с другими, относящимися к ссылкам, псевдоклассам типа {{ cssxref(":hover") }}, {{ cssxref(":active") }} или {{ cssxref(":visited") }}. Чтобы стилизовать ссылки должным образом, вам нужно вставлять правила `:link` до других, как определено _LVHA-порядком_: `:link` — `:visited` — `:hover` — `:active`. Псевдо-класс {{ cssxref(":focus") }} обычно размещается прямо перед или сразу после `:hover`, в зависимости от ожидаемого эффекта.
+
+> **Примечание:** **Замечание\*\***:\*\* Используйте {{cssxref(":any-link")}} чтобы выбрать ссылку, независимо от того, была она посещена или нет.
+
+## Примеры
+
+```css
+a:link {color: slategray;}
+.external:link {background-color: lightblue;}
+```
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', 'scripting.html#selector-link', ':link') }} | {{ Spec2('HTML WHATWG') }} | |
+| {{ SpecName('CSS4 Selectors', '#link', ':link') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. |
+| {{ SpecName('CSS3 Selectors', '#link', ':link') }} | {{ Spec2('CSS3 Selectors') }} | Без изменений |
+| {{ SpecName('CSS2.1', 'selector.html#link-pseudo-classes', ':link') }} | {{ Spec2('CSS2.1') }} | Появилось ограничение применять только для элемента {{ HTMLElement("a") }}. |
+| {{ SpecName('CSS1', '#anchor-pseudo-classes', ':link') }} | {{ Spec2('CSS1') }} | Изначальное определение. |
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ cssxref(":visited") }}, {{ cssxref(":hover") }}, {{ cssxref(":active") }}
diff --git a/files/ru/web/css/_colon_not/index.html b/files/ru/web/css/_colon_not/index.html
deleted file mode 100644
index a761678b357329..00000000000000
--- a/files/ru/web/css/_colon_not/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
----
-title: ':not()'
-slug: 'Web/CSS/:not'
-translation_of: 'Web/CSS/:not'
----
-{{ CSSRef() }}
-
-Описание
-
-Отрицательный CSS псевдокласс , :not(X) - функция, принимающая простой селектор X в качестве аргумента. Он находит элементы, не соответствующие селектору. X не должен содержать других отрицательных селекторов.
-
-Замечания:
-
-
- С этого псевдокласса можно написать бесполезные селекторы. Например, :not(*) найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.
- Возможно переписать другие правила. Например foo:not(bar) найдёт тот же элемент, что и простой foo. Тем не менее специфичность первого выше.
- :not(foo){} найдёт что угодно, что не foo, включая {{HTMLElement("html")}} и {{HTMLElement("body")}}. Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, body :not(table) a применится к ссылкам внутри таблицы, тогда как {{HTMLElement("tr")}} будет соответствовать :not() части селектора.
-
-
Синтаксис
-
-:not(selector) { style properties }
-
-Пример
-
-p:not(.classy) { color: red; }
-body :not(p) { color: green; }
-
-CSS выше и HTML ниже...
-
-<p>Некоторый текст.</p>
-<p class="classy">Какой-то другой текст.</p>
-<span>Ещё текст<span>
-
-
-Выведет это:
-
-{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/_colon_not/index.md b/files/ru/web/css/_colon_not/index.md
new file mode 100644
index 00000000000000..1de441ae2809ee
--- /dev/null
+++ b/files/ru/web/css/_colon_not/index.md
@@ -0,0 +1,47 @@
+---
+title: ':not()'
+slug: Web/CSS/:not
+translation_of: Web/CSS/:not
+---
+{{ CSSRef() }}
+
+## Описание
+
+**Отрицательный** [CSS псевдокласс](/ru/docs/CSS/Pseudo-classes "Pseudo-classes"), `:not(X)` - функция, принимающая простой селектор _X_ в качестве аргумента. Он находит элементы, не соответствующие селектору. _X_ не должен содержать других отрицательных селекторов.
+
+> **Примечание:** **Замечания:\*** С этого псевдокласса можно написать бесполезные селекторы. Например, `:not(*)` найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.
+>
+> - Возможно переписать другие правила. Например `foo:not(bar)` найдёт тот же элемент, что и простой `foo`. Тем не менее [специфичность](/ru/docs/CSS/Specificity "Specificity") первого выше.
+> - `:not(foo){} `найдёт что угодно, что не `foo`, **включая {{HTMLElement("html")}} и {{HTMLElement("body")}}.**
+> - Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, `body :not(table) a` применится к ссылкам внутри таблицы, тогда как {{HTMLElement("tr")}} будет соответствовать `:not()` части селектора.
+
+## Синтаксис
+
+ :not(selector) { style properties }
+
+## Пример
+
+```css
+p:not(.classy) { color: red; }
+body :not(p) { color: green; }
+```
+
+CSS выше и HTML ниже...
+
+```html
+Некоторый текст.
+Какой-то другой текст.
+Ещё текст
+```
+
+Выведет это:
+
+{{ EmbedLiveSample('Examples', '', '', '', 'Web/CSS/:not') }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/_colon_nth-child/index.html b/files/ru/web/css/_colon_nth-child/index.html
deleted file mode 100644
index 9314b81f3f5e27..00000000000000
--- a/files/ru/web/css/_colon_nth-child/index.html
+++ /dev/null
@@ -1,163 +0,0 @@
----
-title: ':nth-child'
-slug: 'Web/CSS/:nth-child'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоклассы
-translation_of: 'Web/CSS/:nth-child'
----
-{{CSSRef}}
-
-CSS псевдокласс :nth-child()
-
-/* Выбирает каждый четвёртый элемент
- среди любой группы соседних элементов */
-:nth-child(4n) {
- color: lime;
-}
-
-
-Синтаксис
-
-Псевдокласс nth-child указывается с единственным аргументом, описывающим паттерн для выбирания элементов.
-
-Ключевые слова
-
-
- oddОписывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
- evenОписывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.
-
-
-Функциональная запись
-
-
- <An+B>Описывает элементы среди группы соседних с номерами, соответствующими паттерну An+B (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения A и B должны быть {{cssxref("<integer>")}}s.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Примеры селекторов
-
-
- tr:nth-child(odd) или tr:nth-child(2n+1)Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
- tr:nth-child(even) or tr:nth-child(2n)Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
- :nth-child(7)Описывает седьмой элемент.
- :nth-child(5n)Описывает элементы с номерами 5, 10, 15, и т. д.
- :nth-child(3n+4)Описывает элементы с номерами 4, 7, 10, 13, и т. д.
- :nth-child(-n+3)Описывает первые три элемента среди группы соседних элементов.
- p:nth-child(n)Описывает каждый элемент<p> среди группы соседних элементов. Эквивалентно простому селектору p.
- p:nth-child(1) или p:nth-child(0n+1)Описывает каждый элемент <p>, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.
-
-
-Подробный пример
-
-HTML
-
-<h3><code>span:nth-child(2n+1)</code>, БЕЗ элемента
- <code><em></code> в группе элементов-потомков.</h3>
-<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
-<div class="first">
- <span>Span 1!</span>
- <span>Span 2</span>
- <span>Span 3!</span>
- <span>Span 4</span>
- <span>Span 5!</span>
- <span>Span 6</span>
- <span>Span 7!</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-child(2n+1)</code>, С элементом
- <code><em></code> в группе элементов-потомков.</h3>
-<p>Элементы 1, 5 и 7 будут выбраны.<br>
- 3 используется в подсчёте потому что это элемент-потомок,
- но он не выбран потому что он не <code><span></code>.</p>
-<div class="second">
- <span>Span!</span>
- <span>Span</span>
- <em>Это `em`.</em>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
-</div>
-
-<br>
-
-<h3><code>span:nth-of-type(2n+1)</code>, С элементом
- <code><em></code> в группе элементов-потомков.</h3>
-<p>Элементы 1, 4, 6 и 8 будут выбраны.<br>
- 3 не используется в подсчёте и не выбран, потому что это <code><em></code>,
- но не <code><span></code>, а <code>nth-of-type</code> выбирает только
- потомков этого типа. Элемент <code><em></code> полностью пропускается и игнорируется.</p>
-<div class="third">
- <span>Span!</span>
- <span>Span</span>
- <em>Это `em`.</em>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
- <span>Span</span>
- <span>Span!</span>
-</div>
-
-
-CSS
-
-html {
- font-family: sans-serif;
-}
-
-span,
-div em {
- padding: 5px;
- border: 1px solid green;
- display: inline-block;
- margin-bottom: 3px;
-}
-
-.first span:nth-child(2n+1),
-.second span:nth-child(2n+1),
-.third span:nth-of-type(2n+1) {
- background-color: lime;
-}
-
-Результат
-
-{{EmbedLiveSample('Подробный_пример', 550, 550)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}
-
diff --git a/files/ru/web/css/_colon_nth-child/index.md b/files/ru/web/css/_colon_nth-child/index.md
new file mode 100644
index 00000000000000..f77bf1540d3038
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-child/index.md
@@ -0,0 +1,157 @@
+---
+title: ':nth-child'
+slug: Web/CSS/:nth-child
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоклассы
+translation_of: Web/CSS/:nth-child
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:nth-child()`** находит один или более элементов, основываясь на их позиции среди группы соседних элементов.
+
+```css
+/* Выбирает каждый четвёртый элемент
+ среди любой группы соседних элементов */
+:nth-child(4n) {
+ color: lime;
+}
+```
+
+## Синтаксис
+
+Псевдокласс `nth-child` указывается с единственным аргументом, описывающим паттерн для выбирания элементов.
+
+### Ключевые слова
+
+- `odd`
+ - : Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.
+- `even`
+ - : Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.
+
+### Функциональная запись
+
+- ``
+ - : Описывает элементы среди группы соседних с номерами, соответствующими паттерну `An+B` (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения `A` и `B` должны быть {{cssxref("<integer>")}}s.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Примеры селекторов
+
+- `tr:nth-child(odd)` или `tr:nth-child(2n+1)`
+ - : Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.
+- `tr:nth-child(even)` or `tr:nth-child(2n)`
+ - : Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.
+- `:nth-child(7)`
+ - : Описывает седьмой элемент.
+- `:nth-child(5n)`
+ - : Описывает элементы с номерами 5, 10, 15, и т. д.
+- `:nth-child(3n+4)`
+ - : Описывает элементы с номерами 4, 7, 10, 13, и т. д.
+- `:nth-child(-n+3)`
+ - : Описывает первые три элемента среди группы соседних элементов.
+- `p:nth-child(n)`
+ - : Описывает каждый элемент`` среди группы соседних элементов. Эквивалентно простому селектору `p`.
+- `p:nth-child(1)` или `p:nth-child(0n+1)`
+ - : Описывает каждый элемент `
`, являющийся первым среди группы соседних элементов. Эквивалентно селектору {{cssxref(":first-child")}}.
+
+### Подробный пример
+
+#### HTML
+
+```html
+
span:nth-child(2n+1), БЕЗ элемента
+ <em> в группе элементов-потомков.Элементы 1, 3, 5 и 7 будут выбраны.
+
+ Span 1!
+ Span 2
+ Span 3!
+ Span 4
+ Span 5!
+ Span 6
+ Span 7!
+
+
+span:nth-child(2n+1), С элементом
+ <em> в группе элементов-потомков.Элементы 1, 5 и 7 будут выбраны.<span>.
+
+ Span!
+ Span
+ Это `em`.
+ Span
+ Span!
+ Span
+ Span!
+ Span
+
+
+span:nth-of-type(2n+1), С элементом
+ <em> в группе элементов-потомков.Элементы 1, 4, 6 и 8 будут выбраны.<em>,
+ но не <span>, а nth-of-type выбирает только
+ потомков этого типа. Элемент <em> полностью пропускается и игнорируется.
+
+ Span!
+ Span
+ Это `em`.
+ Span!
+ Span
+ Span!
+ Span
+ Span!
+
+```
+
+#### CSS
+
+```css
+html {
+ font-family: sans-serif;
+}
+
+span,
+div em {
+ padding: 5px;
+ border: 1px solid green;
+ display: inline-block;
+ margin-bottom: 3px;
+}
+
+.first span:nth-child(2n+1),
+.second span:nth-child(2n+1),
+.third span:nth-of-type(2n+1) {
+ background-color: lime;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Подробный_пример', 550, 550)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ Cssxref(":nth-of-type") }}, {{ Cssxref(":nth-last-child") }}
diff --git a/files/ru/web/css/_colon_nth-last-child/index.html b/files/ru/web/css/_colon_nth-last-child/index.html
deleted file mode 100644
index 171a3801e078b1..00000000000000
--- a/files/ru/web/css/_colon_nth-last-child/index.html
+++ /dev/null
@@ -1,85 +0,0 @@
----
-title: ':nth-last-child'
-slug: 'Web/CSS/:nth-last-child'
-tags:
- - Псевдоклассы
-translation_of: 'Web/CSS/:nth-last-child'
----
-{{CSSRef}}
-
-Описание
-
-CSS псевдокласс :nth-last-child(an+b) находит элемент, имеющий a n+b -1n может быть положительным или нулевым, а также имеющий родительский элемент.
-
-В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с конца списка потомков, не с начала.
-
-Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.
-
-Синтаксис
-
-element:nth-last-child(a n + b ) {стили }
-
-
-Примеры
-
-Пример селекторов
-
-
- tr:nth-last-child(-n+4)Находит последние 4 строки HTML таблицы.
- span:nth-last-child(even)Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.
-
-
-Использование
-
-Этот CSS ...
-
-table {
- border: 1px solid blue;
-}
-tr:nth-last-child(-n+3) { /* последние 3 потомка */
- background-color: lime;
-}
-
-
-... с этим HTML ...
-
-<table>
- <tbody>
- <tr>
- <td>Первая</td>
- </tr>
- <tr>
- <td>Вторая строка</td>
- </tr>
- <tr>
- <td>Третья</td>
- </tr>
- <tr>
- <td>Четвёртая</td>
- </tr>
- <tr>
- <td>Пятая строчка</td>
- </tr>
- </tbody>
-</table>
-
-
-... будет выглядеть, как :
-
-{{EmbedLiveSample('Примеры', '100%', 150)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{Cssxref(":nth-child")}}
-
diff --git a/files/ru/web/css/_colon_nth-last-child/index.md b/files/ru/web/css/_colon_nth-last-child/index.md
new file mode 100644
index 00000000000000..57a2d2860eca2a
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-child/index.md
@@ -0,0 +1,82 @@
+---
+title: ':nth-last-child'
+slug: Web/CSS/:nth-last-child
+tags:
+ - Псевдоклассы
+translation_of: Web/CSS/:nth-last-child
+---
+{{CSSRef}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:nth-last-child(an+b)` находит элемент, имеющий `an+b-1` потомков после данной позиции в дереве документа, значение для `n `может быть положительным или нулевым, а также имеющий родительский элемент.
+
+В результате, он функционирует так же, как и {{Cssxref(":nth-child")}}, кроме того, что выбирает элементы, считая в обратном порядке, с **конца** списка потомков, не с начала.
+
+Смотрите {{Cssxref(":nth-child")}} для более тщательного описания синтаксиса его аргументов.
+
+## Синтаксис
+
+ element:nth-last-child(an + b) {стили }
+
+## Примеры
+
+### Пример селекторов
+
+- `tr:nth-last-child(-n+4)`
+ - : Находит последние 4 строки HTML таблицы.
+- `span:nth-last-child(even)`
+ - : Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.
+
+### Использование
+
+Этот CSS ...
+
+```css
+table {
+ border: 1px solid blue;
+}
+tr:nth-last-child(-n+3) { /* последние 3 потомка */
+ background-color: lime;
+}
+```
+
+... с этим HTML ...
+
+```html
+
+
+
+ Первая
+
+
+ Вторая строка
+
+
+ Третья
+
+
+ Четвёртая
+
+
+ Пятая строчка
+
+
+
+```
+
+... будет выглядеть, как :
+
+{{EmbedLiveSample('Примеры', '100%', 150)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{Cssxref(":nth-child")}}
diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.html b/files/ru/web/css/_colon_nth-last-of-type/index.html
deleted file mode 100644
index 5d19f1058a2408..00000000000000
--- a/files/ru/web/css/_colon_nth-last-of-type/index.html
+++ /dev/null
@@ -1,74 +0,0 @@
----
-title: ':nth-last-of-type()'
-slug: 'Web/CSS/:nth-last-of-type'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоклассы
-translation_of: 'Web/CSS/:nth-last-of-type'
----
-{{CSSRef}}
-
-CSS псевдокласс :nth-last-of-type()
-
-/* Выбирает каждый четвёртый элемент <p>
- среди любой группы соседних элементов,
- отсчёт начинается с последнего элемента */
-p:nth-last-of-type(4n) {
- color: lime;
-}
-
-
-
Примечание: Этот псевдокласс практически такой же как {{Cssxref(":nth-of-type")}}, за исключением того, что счёт элементов производится в обратном порядке начиная с конца , а не в обычном порядке с начала.
-
Синтаксис
-
-Псевдокласс nth-last-of-type указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.
-
-Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-last-child")}}.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<div>
- <span>Это span.</span>
- <span>Это другой span.</span>
- <em>Это текст будет подчёркнут.</em>
- <span>Круто, этот span лаймовый!!!</span>
- <strike>Это вообще не span.</strike>
- <span>Это ещё один последний span.</span>
-</div>
-
-CSS
-
-span:nth-last-of-type(2) {
- background-color: lime;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример')}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}
-
diff --git a/files/ru/web/css/_colon_nth-last-of-type/index.md b/files/ru/web/css/_colon_nth-last-of-type/index.md
new file mode 100644
index 00000000000000..5c7e66adcc3bd9
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-last-of-type/index.md
@@ -0,0 +1,74 @@
+---
+title: ':nth-last-of-type()'
+slug: Web/CSS/:nth-last-of-type
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоклассы
+translation_of: Web/CSS/:nth-last-of-type
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:nth-last-of-type()`** находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов, считая с конца.
+
+```css
+/* Выбирает каждый четвёртый элемент
+ среди любой группы соседних элементов,
+ отсчёт начинается с последнего элемента */
+p:nth-last-of-type(4n) {
+ color: lime;
+}
+```
+
+> **Примечание:** Этот псевдокласс практически такой же как {{Cssxref(":nth-of-type")}}, за исключением того, что счёт элементов производится в обратном порядке начиная с _конца_, а не в обычном порядке с начала.
+
+## Синтаксис
+
+Псевдокласс `nth-last-of-type` указывается с единственным аргументом, описывающим паттерн для выбирания элементов, начиная с конца.
+
+Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-last-child")}}.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+
+ Это span.
+ Это другой span.
+ Это текст будет подчёркнут.
+ Круто, этот span лаймовый!!!
+ Это вообще не span.
+ Это ещё один последний span.
+
+```
+
+### CSS
+
+```css
+span:nth-last-of-type(2) {
+ background-color: lime;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример')}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{Cssxref(":nth-last-child")}}, {{Cssxref(":nth-of-type")}}
diff --git a/files/ru/web/css/_colon_nth-of-type/index.html b/files/ru/web/css/_colon_nth-of-type/index.html
deleted file mode 100644
index b33fb7090325ca..00000000000000
--- a/files/ru/web/css/_colon_nth-of-type/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: ':nth-of-type'
-slug: 'Web/CSS/:nth-of-type'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоклассы
-translation_of: 'Web/CSS/:nth-of-type'
----
-{{CSSRef}}
-
-CSS псевдокласс :nth-of-type()
-
-/* Выбирает каждый четвёртый элемент <p>
- среди любой группы соседних элементов. */
-p:nth-of-type(4n) {
- color: lime;
-}
-
-Синтаксис
-
-Псевдокласс nth-of-type указывается с единственным аргументом, описывающим паттерн для выбора элементов.
-
-Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-child")}}.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Базовый пример
-
-HTML
-
-<div>
- <div>Этот элемент не учитывается.</div>
- <p>Первый параграф.</p>
- <p>Второй параграф.</p>
- <div>Этот элемент не учитывается.</div>
- <p>Третий параграф.</p>
- <p>Четвёртый параграф.</p>
-</div>
-
-CSS
-
-/* Нечётные параграфы */
-p:nth-of-type(2n+1) {
- color: red;
-}
-
-/* Чётные параграфы */
-p:nth-of-type(2n) {
- color: blue;
-}
-
-/* Первый параграф */
-p:nth-of-type(1) {
- font-weight: bold;
-}
-
-
-Результат
-
-{{EmbedLiveSample('Базовый_пример', 250, 200)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{Cssxref(":nth-child")}}, {{Cssxref(":nth-last-of-type")}}
-
diff --git a/files/ru/web/css/_colon_nth-of-type/index.md b/files/ru/web/css/_colon_nth-of-type/index.md
new file mode 100644
index 00000000000000..a53f10e441133c
--- /dev/null
+++ b/files/ru/web/css/_colon_nth-of-type/index.md
@@ -0,0 +1,84 @@
+---
+title: ':nth-of-type'
+slug: Web/CSS/:nth-of-type
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоклассы
+translation_of: Web/CSS/:nth-of-type
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) **`:nth-of-type()`** находит один или более элементов с заданным тегом, основываясь на их позиции среди группы соседних элементов.
+
+```css
+/* Выбирает каждый четвёртый элемент
+ среди любой группы соседних элементов. */
+p:nth-of-type(4n) {
+ color: lime;
+}
+```
+
+## Синтаксис
+
+Псевдокласс `nth-of-type` указывается с единственным аргументом, описывающим паттерн для выбора элементов.
+
+Более детальное описание синтаксиса может быть найдено на странице псевдокласса {{Cssxref(":nth-child")}}.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Базовый пример
+
+#### HTML
+
+```html
+
+
Этот элемент не учитывается.
+
Первый параграф.
+
Второй параграф.
+
Этот элемент не учитывается.
+
Третий параграф.
+
Четвёртый параграф.
+
{{CSSRef}}
-
-Описание
-
-CSS псевдокласс :only-child находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и :first-child:last-child или :nth-child(1):nth-last-child(1), но с меньшей специфичностью.
-
-Синтаксис
-
-parent child:only-child {
- property: value;
-}
-
-
-Примеры
-
-Простой пример
-
-span:only-child {
- color: red;
-}
-
-
-<div>
- <span>Этот span единственный ребёнок своего папы:(</span>
-</div>
-
-<div>
- <span>Этот span один из потомков родителя</span>
- <span>Этот span один из детей отца</span>
-</div>
-
-
-Результат
-
-{{EmbedLiveSample('Простой_пример', '100%', 60)}}
-
-Пример со списком
-
-li li {
- list-style-type: disc;
-}
-li:only-child {
- color: #6699ff;
- font-style: italic;
- list-style-type: square;
-}
-
-<ol>
- <li>Первый
- <ul>
- <li>Это единственный ребёнок
- </ul>
- </li>
- <li>Второй
- <ul>
- <li>Этот список с двумя элементами
- <li>Этот список с двумя элементами
- </ul>
- </li>
- <li>Третий
- <ul>
- <li>Этот список с тремя элементами
- <li>Этот список с тремя элементами
- <li>Этот список с тремя элементами
- </ul>
- </li>
-<ol>
-
-
-Результат
-
-{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/_colon_only-child/index.md b/files/ru/web/css/_colon_only-child/index.md
new file mode 100644
index 00000000000000..712fb82051fae6
--- /dev/null
+++ b/files/ru/web/css/_colon_only-child/index.md
@@ -0,0 +1,91 @@
+---
+title: ':only-child'
+slug: Web/CSS/:only-child
+tags:
+ - Псевдоклассы
+translation_of: Web/CSS/:only-child
+---
+{{CSSRef}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:only-child` находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и `:first-child:last-child` или `:nth-child(1):nth-last-child(1)`, но с меньшей специфичностью.
+
+## Синтаксис
+
+ parent child:only-child {
+ property: value;
+ }
+
+## Примеры
+
+### Простой пример
+
+```css
+span:only-child {
+ color: red;
+}
+```
+
+```html
+
+ Этот span единственный ребёнок своего папы:(
+
+
+
+ Этот span один из потомков родителя
+ Этот span один из детей отца
+
+```
+
+#### Результат
+
+{{EmbedLiveSample('Простой_пример', '100%', 60)}}
+
+### Пример со списком
+
+```css
+li li {
+ list-style-type: disc;
+}
+li:only-child {
+ color: #6699ff;
+ font-style: italic;
+ list-style-type: square;
+}
+```
+
+```html
+
+ Первый
+
+ Это единственный ребёнок
+
+
+ Второй
+
+ Этот список с двумя элементами
+ Этот список с двумя элементами
+
+
+ Третий
+
+ Этот список с тремя элементами
+ Этот список с тремя элементами
+ Этот список с тремя элементами
+
+
+
+```
+
+#### Результат
+
+{{EmbedLiveSample('Пример_со_списком', '100%', 220)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/_colon_only-of-type/index.html b/files/ru/web/css/_colon_only-of-type/index.html
deleted file mode 100644
index 1dd8f27fe6a86a..00000000000000
--- a/files/ru/web/css/_colon_only-of-type/index.html
+++ /dev/null
@@ -1,65 +0,0 @@
----
-title: ':only-of-type'
-slug: 'Web/CSS/:only-of-type'
-tags:
- - CSS
- - Псевдоклассы
-translation_of: 'Web/CSS/:only-of-type'
----
-{{CSSRef}}
-
-Описание
-
-CSS псевдокласс :only-of-type выбирает такой элемент, который является единственным потомком такого типа.
-
-/* Выбирает все <p>, которые являются */
-/* единственным потомками типа <p> */
-p:only-of-type {
- background-color: lime;
-}
-
-
-Синтаксис
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<main>
- <div>Я `div` №1.</div>
- <p>Я тут единственный `p` элемент.</p>
- <div>Я `div` №2.</div>
- <div>Я `div` №3.
- <i>Я единственный потомок типа `i`.</i>
- <em>Я `em` №1.</em>
- <em>Я `em` №2.</em>
- </div>
-</main>
-
-CSS
-
-main :only-of-type {
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример', '', '', '', 'Web/CSS/:only-of-type')}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-
-
-Смотрите также
-
-
- {{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}
-
diff --git a/files/ru/web/css/_colon_only-of-type/index.md b/files/ru/web/css/_colon_only-of-type/index.md
new file mode 100644
index 00000000000000..1cea11ccd10af0
--- /dev/null
+++ b/files/ru/web/css/_colon_only-of-type/index.md
@@ -0,0 +1,66 @@
+---
+title: ':only-of-type'
+slug: Web/CSS/:only-of-type
+tags:
+ - CSS
+ - Псевдоклассы
+translation_of: Web/CSS/:only-of-type
+---
+{{CSSRef}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:only-of-type` выбирает такой элемент, который является единственным потомком такого типа.
+
+```css
+/* Выбирает все , которые являются */
+/* единственным потомками типа
*/
+p:only-of-type {
+ background-color: lime;
+}
+```
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+#### HTML
+
+```html
+
+ Я `div` №1.
+ Я тут единственный `p` элемент.
+ Я `div` №2.
+ Я `div` №3.
+ Я единственный потомок типа `i`.
+ Я `em` №1.
+ Я `em` №2.
+
+
+```
+
+#### CSS
+
+```css
+main :only-of-type {
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Пример', '', '', '', 'Web/CSS/:only-of-type')}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{Cssxref(":nth-of-type")}}, {{Cssxref(":first-of-type")}}, {{Cssxref(":last-of-type")}}
diff --git a/files/ru/web/css/_colon_optional/index.html b/files/ru/web/css/_colon_optional/index.html
deleted file mode 100644
index 55e04aee5815b7..00000000000000
--- a/files/ru/web/css/_colon_optional/index.html
+++ /dev/null
@@ -1,34 +0,0 @@
----
-title: ':optional'
-slug: 'Web/CSS/:optional'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:optional'
----
-
{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :optional находит любые {{ HTMLElement("input") }} элементы, у которых не установлен атрибут {{ htmlattrxref("required","input") }}. Он позволяет формам легко отмечать необязательные поля, и давать им соответствующие стили.
-
-Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдокласс {{ cssxref(":required") }}.
-
-Примеры
-
-Смотрите {{ cssxref(":invalid") }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ cssxref(":required") }}
- {{ cssxref(":invalid") }}
- {{ cssxref(":valid") }}
-
diff --git a/files/ru/web/css/_colon_optional/index.md b/files/ru/web/css/_colon_optional/index.md
new file mode 100644
index 00000000000000..15898600a97bde
--- /dev/null
+++ b/files/ru/web/css/_colon_optional/index.md
@@ -0,0 +1,32 @@
+---
+title: ':optional'
+slug: Web/CSS/:optional
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:optional
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:optional` находит любые {{ HTMLElement("input") }} элементы, у которых не установлен атрибут {{ htmlattrxref("required","input") }}. Он позволяет формам легко отмечать необязательные поля, и давать им соответствующие стили.
+
+Чтобы задать особый внешний вид обязательным полям формы можно использовать псевдокласс {{ cssxref(":required") }}.
+
+## Примеры
+
+Смотрите {{ cssxref(":invalid") }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ cssxref(":required") }}
+- {{ cssxref(":invalid") }}
+- {{ cssxref(":valid") }}
diff --git a/files/ru/web/css/_colon_out-of-range/index.html b/files/ru/web/css/_colon_out-of-range/index.html
deleted file mode 100644
index e3ada64aff0cf3..00000000000000
--- a/files/ru/web/css/_colon_out-of-range/index.html
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: ':out-of-range'
-slug: 'Web/CSS/:out-of-range'
-tags:
- - CSS
- - Псевдоклассы
- - Руководство
-translation_of: 'Web/CSS/:out-of-range'
----
-{{CSSRef}}
-
-
-
-Summary
-
-CSS псевдокласс :out-of-range находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.
-
-Замечание: этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".
-
-Пример
-
-
-
HTML
-
-
<form action="" id="form1">
- <ul>Приминаются значения между 1 и 10.
- <li>
- <input id="value1" name="value1" type="number" placeholder="1 to 10" min="1" max="10" value="12">
- <label for="value1">Your value is </label>
- </li>
-</form>
-
-
CSS
-
-
li {
- list-style: none;
- margin-bottom: 1em;
-}
-input {
- border: 1px solid black;
-}
-input:in-range {
- background-color: rgba(0, 255, 0, 0.25);
-}
-input:out-of-range {
- background-color: rgba(255, 0, 0, 0.25);
- border: 2px solid red;
-}
-input:in-range + label::after {
- content:' НОРМАЛЬНОЕ';
-}
-input:out-of-range + label::after {
- content:'вне диапазона!';
-}
-
{{EmbedLiveSample('Пример',600,140)}}
-
-
-
-Спецификации
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}}
- {{Spec2('HTML WHATWG')}}
- Определяет, когда :out-of-range находит элементы в HTML.
-
-
- {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}}
- {{Spec2('CSS4 Selectors')}}
- Изначальное определение.
-
-
-
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_out-of-range/index.md b/files/ru/web/css/_colon_out-of-range/index.md
new file mode 100644
index 00000000000000..46e42c6f8bb29c
--- /dev/null
+++ b/files/ru/web/css/_colon_out-of-range/index.md
@@ -0,0 +1,73 @@
+---
+title: ':out-of-range'
+slug: Web/CSS/:out-of-range
+tags:
+ - CSS
+ - Псевдоклассы
+ - Руководство
+translation_of: Web/CSS/:out-of-range
+---
+{{CSSRef}}
+
+## Summary
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:out-of-range` находит элементы, значение которых находится вне диапазона их ограничений. Он позволяет странице показывать, когда значение элемента находится вне допустимого диапазона. Значение будет вне диапазона, если оно меньше или больше, чем минимальное и максимальное значения.
+
+> **Примечание:** **Замечание:** этот псевдокласс применяется только к элементам с заданным диапазоном ограничений. При отсутствии такого ограничения, элемент не может быть ни "в зоне допустимых значений", ни "вне диапазона".
+
+## Пример
+
+### HTML
+
+```html
+
+```
+
+### CSS
+
+```css
+li {
+ list-style: none;
+ margin-bottom: 1em;
+}
+input {
+ border: 1px solid black;
+}
+input:in-range {
+ background-color: rgba(0, 255, 0, 0.25);
+}
+input:out-of-range {
+ background-color: rgba(255, 0, 0, 0.25);
+ border: 2px solid red;
+}
+input:in-range + label::after {
+ content:' НОРМАЛЬНОЕ';
+}
+input:out-of-range + label::after {
+ content:'вне диапазона!';
+}
+```
+
+{{EmbedLiveSample('Пример',600,140)}}
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| ---------------------------------------------------------------------------------------------------------------- | ------------------------------------ | ---------------------------------------------------------- |
+| {{SpecName('HTML WHATWG', 'scripting.html#selector-out-of-range', ':out-of-range')}} | {{Spec2('HTML WHATWG')}} | Определяет, когда `:out-of-range` находит элементы в HTML. |
+| {{SpecName('CSS4 Selectors', '#out-of-range-pseudo', ':out-of-range')}} | {{Spec2('CSS4 Selectors')}} | Изначальное определение. |
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref(":in-range")}}
+- [Руководство валидации данных в формах](/ru/docs/Web/Guide/HTML/Forms/Data_form_validation)
diff --git a/files/ru/web/css/_colon_placeholder-shown/index.html b/files/ru/web/css/_colon_placeholder-shown/index.html
deleted file mode 100644
index 5b22a80703e0db..00000000000000
--- a/files/ru/web/css/_colon_placeholder-shown/index.html
+++ /dev/null
@@ -1,179 +0,0 @@
----
-title: ':placeholder-shown'
-slug: 'Web/CSS/:placeholder-shown'
-translation_of: 'Web/CSS/:placeholder-shown'
----
-{{CSSRef}}{{SeeCompatTable}}
-
-
-
-/* Выбирает любой элемент с активным плейсхолдером */
-:placeholder-shown {
- border: 2px solid silver;
-}
-
-Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Простой пример
-
-HTML
-
-<input placeholder="Type something here!">
-
-CSS
-
-
-
input:-ms-input-placeholder {
- border-color: silver;
-}
-
-input:-moz-placeholder {
- border-color: silver;
-}
-
input {
- border: 2px solid black;
- padding: 3px;
-}
-
-input:placeholder-shown {
- border-color: silver;
-}
-
-Результат
-
-{{EmbedLiveSample("Простой_пример", 200, 60)}}
-
-Переполнение текстом
-
-На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства {{cssxref("text-overflow")}}.
-
-HTML
-
-<input placeholder="Enter something into this field, if you please!">
-
-CSS
-
-
-
input:-ms-input-placeholder {
- text-overflow: ellipsis;
-}
-
-input:-moz-placeholder {
- text-overflow: ellipsis;
-}
-
input:placeholder-shown {
- text-overflow: ellipsis;
-}
-
-Результат
-
-{{EmbedLiveSample("Переполнение_текстом", 200, 60)}}
-
-Цветной текст
-
-HTML
-
-<input placeholder="Type something here!">
-
-
-CSS
-
-
-
input:-ms-input-placeholder {
- color: red;
- font-style: italic;
-}
-
-input:-moz-placeholder {
- color: red;
- font-style: italic;
-}
-
input:placeholder-shown {
- color: red;
- font-style: italic;
-}
-
-Результат
-
-{{EmbedLiveSample("Цветной_текст", 200, 60)}}
-
-Кастомизированное поле ввода
-
-В следующем примере выделены поля Branch и ID с пользовательским стилем.
-
-HTML
-
-<form id="test">
- <p>
- <label for="name">Enter Student Name:</label>
- <input id="name" placeholder="Student Name"/>
- </p>
- <p>
- <label for="branch">Enter Student Branch:</label>
- <input id="branch" placeholder="Student Branch"/>
- </p>
- <p>
- <label for="sid">Enter Student ID:</label>
- <input type="number" pattern="[0-9]{8}" title="8 digit ID" id="sid" class="studentid" placeholder="8 digit id"/>
- </p>
- <input type="submit"/>
-</form>
-
-CSS
-
-
-
input.studentid:-ms-input-placeholder {
- background-color: yellow;
- color: red;
- font-style: italic;
-}
-
-input.studentid:-moz-placeholder {
- background-color: yellow;
- color: red;
- font-style: italic;
-}
-
input {
- background-color: #E8E8E8;
- color: black;
-}
-
-input.studentid:placeholder-shown {
- background-color: yellow;
- color: red;
- font-style: italic;
-}
-
-Результат
-
-{{EmbedLiveSample("Кастомизированное_поле_ввода", 200, 180)}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
- Псевдоэлемент {{cssxref("::placeholder")}}, применяющий стили к самому себе .
- Связанные HTML-элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
- HTML формы
diff --git a/files/ru/web/css/_colon_placeholder-shown/index.md b/files/ru/web/css/_colon_placeholder-shown/index.md
new file mode 100644
index 00000000000000..2cd14436c57e96
--- /dev/null
+++ b/files/ru/web/css/_colon_placeholder-shown/index.md
@@ -0,0 +1,190 @@
+---
+title: ':placeholder-shown'
+slug: Web/CSS/:placeholder-shown
+translation_of: Web/CSS/:placeholder-shown
+---
+{{CSSRef}}{{SeeCompatTable}}[CSS псевдокласс](/ru/docs/Web/CSS) **`:placeholder-shown`** представляет любой {{htmlElement("input")}} или {{htmlElement("textarea")}} элемент, который отображает в данный момент[ текст заполнитель (плейсхолдер)](/ru/docs/Web/HTML/Element/input#attr-placeholder).
+
+```css
+/* Выбирает любой элемент с активным плейсхолдером */
+:placeholder-shown {
+ border: 2px solid silver;
+}
+```
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Простой пример
+
+#### HTML
+
+```html
+{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :read-only находит элементы, недоступные для редактирования пользователем.
-
-Пример
-
-
-
input:-moz-read-only { background: #eee; }
-input:read-only { background: #eee; }
-
-
Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }}
- {{ Spec2('HTML WHATWG') }}
- Без изменений.
-
-
- {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }}
- {{ Spec2('HTML5 W3C') }}
- Определяет семантику в HTML и ограничения проверки.
-
-
- {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }}
- {{ Spec2('CSS4 Selectors') }}
- Без изменений.
-
-
- {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }}
- {{ Spec2('CSS3 Basic UI') }}
- Определяет псевдокласс, но не семантику.
-
-
-
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_read-only/index.md b/files/ru/web/css/_colon_read-only/index.md
new file mode 100644
index 00000000000000..d617fcea2a84ae
--- /dev/null
+++ b/files/ru/web/css/_colon_read-only/index.md
@@ -0,0 +1,37 @@
+---
+title: ':read-only'
+slug: Web/CSS/:read-only
+tags:
+ - Псевдо-элементы
+translation_of: Web/CSS/:read-only
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:read-only` находит элементы, недоступные для редактирования пользователем.
+
+## Пример
+
+```css
+input:-moz-read-only { background: #eee; }
+input:read-only { background: #eee; }
+```
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| ---------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. |
+| {{ SpecName('HTML5 W3C', '#selector-read-only', ':read-only') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. |
+| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-only') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. |
+| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-only') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. |
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [`:read-write`](/ru/docs/Web/CSS/:read-write)
+- HTML атрибут [`contenteditable`](/ru/docs/HTML/Content_Editable "HTML/Content Editable")
diff --git a/files/ru/web/css/_colon_read-write/index.html b/files/ru/web/css/_colon_read-write/index.html
deleted file mode 100644
index 54923e213c0bd4..00000000000000
--- a/files/ru/web/css/_colon_read-write/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: ':read-write'
-slug: 'Web/CSS/:read-write'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:read-write'
----
-{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :read-write находит элементы, доступные для редактирования пользователем, такие как текстовые поля.
-
-Пример
-
-
-
input:-moz-read-write { background: #eee; }
-input:read-write { background: #eee; }
-
-
Спецификации
-
-
-
-
- Спецификации
- Статус
- Комментарий
-
-
-
-
- {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }}
- {{ Spec2('HTML WHATWG') }}
- Без изменений.
-
-
- {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }}
- {{ Spec2('HTML5 W3C') }}
- Определяет семантику в HTML и ограничения проверки.
-
-
- {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }}
- {{ Spec2('CSS4 Selectors') }}
- Без изменений.
-
-
- {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }}
- {{ Spec2('CSS3 Basic UI') }}
- Определяет псевдокласс, но не семантику.
-
-
-
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-See also
-
-
diff --git a/files/ru/web/css/_colon_read-write/index.md b/files/ru/web/css/_colon_read-write/index.md
new file mode 100644
index 00000000000000..730f51c49ed2ed
--- /dev/null
+++ b/files/ru/web/css/_colon_read-write/index.md
@@ -0,0 +1,37 @@
+---
+title: ':read-write'
+slug: Web/CSS/:read-write
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:read-write
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:read-write` находит элементы, доступные для редактирования пользователем, такие как текстовые поля.
+
+## Пример
+
+```css
+input:-moz-read-write { background: #eee; }
+input:read-write { background: #eee; }
+```
+
+## Спецификации
+
+| Спецификации | Статус | Комментарий |
+| -------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------------------------------- |
+| {{ SpecName('HTML WHATWG', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML WHATWG') }} | Без изменений. |
+| {{ SpecName('HTML5 W3C', '#selector-read-write', ':read-write') }} | {{ Spec2('HTML5 W3C') }} | Определяет семантику в HTML и ограничения проверки. |
+| {{ SpecName('CSS4 Selectors', '#rw-pseudos', ':read-write') }} | {{ Spec2('CSS4 Selectors') }} | Без изменений. |
+| {{ SpecName('CSS3 Basic UI', '#pseudo-ro-rw', ':read-write') }} | {{ Spec2('CSS3 Basic UI') }} | Определяет псевдокласс, но не семантику. |
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## See also
+
+- [`:read-only`](/ru/docs/Web/CSS/:read-only)
+- HTML атрибут [`contenteditable`](/ru/docs/HTML/Content_Editable "HTML/Content Editable")
diff --git a/files/ru/web/css/_colon_required/index.html b/files/ru/web/css/_colon_required/index.html
deleted file mode 100644
index cca9d39346d2b3..00000000000000
--- a/files/ru/web/css/_colon_required/index.html
+++ /dev/null
@@ -1,32 +0,0 @@
----
-title: ':required'
-slug: 'Web/CSS/:required'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:required'
----
-{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :required находит любые {{ HTMLElement("input") }} элементы, имеющие атрибут {{ htmlattrxref("required", "input") }}. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.
-
-Псевдо-класс {{ cssxref(":optional") }} может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.
-
-Примеры
-
-Смотрите {{ cssxref(":invalid") }}.
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}
-
diff --git a/files/ru/web/css/_colon_required/index.md b/files/ru/web/css/_colon_required/index.md
new file mode 100644
index 00000000000000..3c3af641b678fc
--- /dev/null
+++ b/files/ru/web/css/_colon_required/index.md
@@ -0,0 +1,30 @@
+---
+title: ':required'
+slug: Web/CSS/:required
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:required
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:required` находит любые {{ HTMLElement("input") }} элементы, имеющие атрибут {{ htmlattrxref("required", "input") }}. Он позволяет формам легко сообщать, что поля должны быть корректно заполнены перед отправкой формы.
+
+Псевдо-класс {{ cssxref(":optional") }} может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.
+
+## Примеры
+
+Смотрите {{ cssxref(":invalid") }}.
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ cssxref(":optional") }}, {{ cssxref(":invalid") }}, {{ cssxref(":valid") }}
diff --git a/files/ru/web/css/_colon_right/index.html b/files/ru/web/css/_colon_right/index.html
deleted file mode 100644
index b45d9b9ed90c10..00000000000000
--- a/files/ru/web/css/_colon_right/index.html
+++ /dev/null
@@ -1,42 +0,0 @@
----
-title: ':right'
-slug: 'Web/CSS/:right'
-translation_of: 'Web/CSS/:right'
----
-{{ CSSRef() }}
-
-The :rightpage pseudo-class matches any right page when printing a page. It allows you to describe the styling of right-side pages.
-
-/* Selects the content on the right-hand pages while printing */
-@page :right {
- margin: 2in 3in;
-}
-
-Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a :right page and if it has a major writing direction of right-to-left then it will be a {{ Cssxref(":left") }} page.
-
-Note: Вы можете не менять все CSS-свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS-свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.
-
-Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-@page :right {
- margin: 2in 3in;
-}
-
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ Cssxref("@page") }}, {{ Cssxref(":first") }}, {{ Cssxref(":left") }}
-
diff --git a/files/ru/web/css/_colon_right/index.md b/files/ru/web/css/_colon_right/index.md
new file mode 100644
index 00000000000000..33b365e26f6af4
--- /dev/null
+++ b/files/ru/web/css/_colon_right/index.md
@@ -0,0 +1,43 @@
+---
+title: ':right'
+slug: Web/CSS/:right
+translation_of: Web/CSS/:right
+---
+{{ CSSRef() }}
+
+The **`:right`** CSS [page](/en/CSS/@page "@page") [pseudo-class](/en/CSS/Pseudo-classes "Pseudo-classes") matches any right page when printing a page. It allows you to describe the styling of right-side pages.
+
+```css
+/* Selects the content on the right-hand pages while printing */
+@page :right {
+ margin: 2in 3in;
+}
+```
+
+Whether the page is left or right is decided by the major writing direction of the document. For example, if the first page has a major writing direction of left-to-right then it will be a `:right` page and if it has a major writing direction of right-to-left then it will be a `{{ Cssxref(":left") }}` page.
+
+> **Примечание:** Вы можете не менять все CSS-свойства, а поменять только margin, padding, border, и background для страницы. Все остальные CSS-свойства будут проигнорированы и изменения будут применены только для страницы, но не для её содержимого.
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+```css
+@page :right {
+ margin: 2in 3in;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ Cssxref("@page") }}, {{ Cssxref(":first") }}, {{ Cssxref(":left") }}
diff --git a/files/ru/web/css/_colon_root/index.html b/files/ru/web/css/_colon_root/index.html
deleted file mode 100644
index 54f45a975b0f50..00000000000000
--- a/files/ru/web/css/_colon_root/index.html
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: ':root'
-slug: 'Web/CSS/:root'
-tags:
- - CSS
- - CSS Pseudo-class
- - Layout
- - Reference
- - Web
- - Псевдоклассы
-translation_of: 'Web/CSS/:root'
----
-{{CSSRef}}
-
-Описание
-
-CSS псевдокласс :root находит корневой элемент дерева документа. Применимо к HTML, :root находит элемент {{HTMLElement("html")}} и идентичен селектору по тегу html, но его специфичность выше.
-
-Пример
-
-Использование :root полезно для объявления CSS Переменных :
-
-:root {
- --main-color: hotpink;
- --pane-padding: 5px 42px;
-}
-
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/_colon_root/index.md b/files/ru/web/css/_colon_root/index.md
new file mode 100644
index 00000000000000..4a44d1c94dba22
--- /dev/null
+++ b/files/ru/web/css/_colon_root/index.md
@@ -0,0 +1,36 @@
+---
+title: ':root'
+slug: Web/CSS/:root
+tags:
+ - CSS
+ - CSS Pseudo-class
+ - Layout
+ - Reference
+ - Web
+ - Псевдоклассы
+translation_of: Web/CSS/:root
+---
+{{CSSRef}}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы) `:root` находит корневой элемент дерева документа. Применимо к HTML, `:root` находит элемент {{HTMLElement("html")}} и идентичен селектору по тегу `html`, но его [специфичность](/ru/docs/Web/CSS/Specificity) выше.
+
+## Пример
+
+Использование `:root` полезно для объявления [CSS Переменных](/ru/docs/Web/CSS/--*):
+
+```css
+:root {
+ --main-color: hotpink;
+ --pane-padding: 5px 42px;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/_colon_target/index.html b/files/ru/web/css/_colon_target/index.html
deleted file mode 100644
index 30173a7b14ddca..00000000000000
--- a/files/ru/web/css/_colon_target/index.html
+++ /dev/null
@@ -1,186 +0,0 @@
----
-title: ':target'
-slug: 'Web/CSS/:target'
-tags:
- - Вёрстка
- - Псевдоклассы
-translation_of: 'Web/CSS/:target'
----
-{{CSSRef}}
-
-Псевдокласс CSS :target
-
-/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
-:target {
- border: 2px solid black;
-}
-
-Для примера, следующий URL имеет фрагмент (обозначается знаком # ), который указывает на элемент с именем section2:
-
-http://www.example.com/index.html#section2
-
-Следующий элемент будет выбран селектором :target, если текущий URL равен вышеуказанному:
-
-<section id="section2">Example</section>
-
-Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Таблица контента
-
-Псевдокласс :target может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .
-
-HTML
-
-<h3>Table of Contents</h3>
-<ol>
- <li><a href="#p1">Jump to the first paragraph!</a></li>
- <li><a href="#p2">Jump to the second paragraph!</a></li>
- <li><a href="#nowhere">This link goes nowhere,
- because the target doesn't exist.</a></li>
-</ol>
-
-<h3>My Fun Article</h3>
-<p id="p1">You can target <i>this paragraph</i> using a
- URL fragment. Click on the link above to try out!</p>
-<p id="p2">This is <i>another paragraph</i>, also accessible
- from the links above. Isn't that delightful?</p>
-
-
-CSS
-
-p:target {
- background-color: gold;
-}
-
-/* Добавление псевдоэлемента внутрь target-элемента */
-p:target::before {
- font: 70% sans-serif;
- content: "►";
- color: limegreen;
- margin-right: .25em;
-}
-
-/* Стиль italic-элементов без target-элемента */
-p:target i {
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
-
-Pure-CSS lightbox
-
-Вы можете использовать псевдокласс :target для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их display на видимый.
-
-
-
-HTML
-
-<ul>
- <li><a href="#example1">Open example #1</a></li>
- <li><a href="#example2">Open example #2</a></li>
-</ul>
-
-<div class="lightbox" id="example1">
- <figure>
- <a href="#" class="close"></a>
- <figcaption>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
- Donec felis enim, placerat id eleifend eu, semper vel sem.</figcaption>
- </figure>
-</div>
-
-<div class="lightbox" id="example2">
- <figure>
- <a href="#" class="close"></a>
- <figcaption>Cras risus odio, pharetra nec ultricies et,
- mollis ac augue. Nunc et diam quis sapien dignissim auctor.
- Quisque quis neque arcu, nec gravida magna.</figcaption>
- </figure>
-</div>
-
-CSS
-
-/* Закрываем lightbox */
-.lightbox {
- display: none;
-}
-
-/* Открываем lightbox */
-.lightbox:target {
- position: absolute;
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-/* Содержимое lightbox */
-.lightbox figcaption {
- width: 25rem;
- position: relative;
- padding: 1.5em;
- background-color: lightpink;
-}
-
-/* Кнопка закрытия */
-.lightbox .close {
- position: relative;
- display: block;
-}
-
-.lightbox .close::after {
- right: -1rem;
- top: -1rem;
- width: 2rem;
- height: 2rem;
- position: absolute;
- display: flex;
- z-index: 1;
- align-items: center;
- justify-content: center;
- background-color: black;
- border-radius: 50%;
- color: white;
- content: "×";
- cursor: pointer;
-}
-
-/* Обёртка lightbox */
-.lightbox .close::before {
- left: 0;
- top: 0;
- width: 100%;
- height: 100%;
- position: fixed;
- background-color: rgba(0,0,0,.7);
- content: "";
- cursor: default;
-}
-
-Результат
-
-{{EmbedLiveSample('Pure-CSS_lightbox', 500, 220)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_target/index.md b/files/ru/web/css/_colon_target/index.md
new file mode 100644
index 00000000000000..0b35f85b7077f4
--- /dev/null
+++ b/files/ru/web/css/_colon_target/index.md
@@ -0,0 +1,193 @@
+---
+title: ':target'
+slug: Web/CSS/:target
+tags:
+ - Вёрстка
+ - Псевдоклассы
+translation_of: Web/CSS/:target
+---
+{{CSSRef}}
+
+[Псевдокласс ](/ru/docs/Web/CSS/Pseudo-classes)[CSS](/ru/docs/Web/CSS) **`:target`** представляет уникальный элемент (целевой элемент) с подходящим {{htmlattrxref("id")}} URL-фрагментом.
+
+```css
+/* Выбирает элемент с подходящим ID текущего URL-фрагмента */
+:target {
+ border: 2px solid black;
+}
+```
+
+Для примера, следующий URL имеет фрагмент (обозначается знаком _#_), который указывает на элемент с именем `section2`:
+
+ http://www.example.com/index.html#section2
+
+Следующий элемент будет выбран селектором `:target`, если текущий URL равен вышеуказанному:
+
+```html
+
+```
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Таблица контента
+
+Псевдокласс `:target` может использоваться для выделения части страницы, на которую была сделана ссылка из оглавления .
+
+#### HTML
+
+```html
+Table of Contents
+
+ Jump to the first paragraph! Jump to the second paragraph! This link goes nowhere,
+ because the target doesn't exist.
+
+My Fun Article
+You can target this paragraph using a
+ URL fragment. Click on the link above to try out!
+This is another paragraph , also accessible
+ from the links above. Isn't that delightful?
+```
+
+#### CSS
+
+```css
+p:target {
+ background-color: gold;
+}
+
+/* Добавление псевдоэлемента внутрь target-элемента */
+p:target::before {
+ font: 70% sans-serif;
+ content: "►";
+ color: limegreen;
+ margin-right: .25em;
+}
+
+/* Стиль italic-элементов без target-элемента */
+p:target i {
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('A_table_of_contents', 500, 300)}}
+
+### Pure-CSS lightbox
+
+Вы можете использовать псевдокласс `:target` для создания lightbox без использования JavaScript. Этот метод основан на способности якорных ссылок указывать на элементы, которые изначально скрыты на странице. После этого, CSS изменяет их `display` на видимый.
+
+> **Примечание:** Более полный pure-CSS lightbox , основанный на псевдоклассе`:target` - [available on GitHub](https://github.com/madmurphy/takefive.css/) ([demo](https://madmurphy.github.io/takefive.css/)).
+
+#### HTML
+
+```html
+
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+ Donec felis enim, placerat id eleifend eu, semper vel sem.
+
+
+
+ Cras risus odio, pharetra nec ultricies et,
+ mollis ac augue. Nunc et diam quis sapien dignissim auctor.
+ Quisque quis neque arcu, nec gravida magna.
+
+
{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :valid находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых валиден , в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.
-
-Пример
-
-Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
-
-HTML
-
-<form>
- <label>Введите URL:</label>
- <input type="url" />
- <br />
- <br />
- <label>Введите адрес эл. почты:</label>
- <input type="email" required/>
-</form>
-
-CSS
-
-input:invalid {
- background-color: #ffdddd;
-}
-
-form:invalid {
- border: 5px solid #ffdddd;
-}
-
-input:valid {
- background-color: #ddffdd;
-}
-
-form:valid {
- border: 5px solid #ddffdd;
-}
-
-input:required {
- border-color: #800000;
- border-width: 3px;
-}
-
-{{ EmbedLiveSample('Пример',600,150) }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- {{ cssxref(":invalid") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}
-
diff --git a/files/ru/web/css/_colon_valid/index.md b/files/ru/web/css/_colon_valid/index.md
new file mode 100644
index 00000000000000..087b2c82175171
--- /dev/null
+++ b/files/ru/web/css/_colon_valid/index.md
@@ -0,0 +1,68 @@
+---
+title: ':valid'
+slug: Web/CSS/:valid
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:valid
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:valid` находит любые {{ HTMLElement("input") }} или {{ HTMLElement("form") }} элементы, контент которых [валиден](/ru/docs/Web/Guide/HTML/HTML5/Constraint_validation "en/HTML/HTML5/Constraint_validation"), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что помогает понять пользователю, что он ввёл данные правильно.
+
+## Пример
+
+Этот пример представляет собой простую форму, цвета элементов которой зелёные, когда данные корректные, и красные, когда нет.
+
+### HTML
+
+```html
+
+```
+
+### CSS
+
+```css
+input:invalid {
+ background-color: #ffdddd;
+}
+
+form:invalid {
+ border: 5px solid #ffdddd;
+}
+
+input:valid {
+ background-color: #ddffdd;
+}
+
+form:valid {
+ border: 5px solid #ddffdd;
+}
+
+input:required {
+ border-color: #800000;
+ border-width: 3px;
+}
+```
+
+{{ EmbedLiveSample('Пример',600,150) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{ cssxref(":invalid") }}, {{ cssxref(":required") }}, {{ cssxref(":optional") }}
diff --git a/files/ru/web/css/_colon_visited/index.html b/files/ru/web/css/_colon_visited/index.html
deleted file mode 100644
index f79ad326ef7651..00000000000000
--- a/files/ru/web/css/_colon_visited/index.html
+++ /dev/null
@@ -1,40 +0,0 @@
----
-title: ':visited'
-slug: 'Web/CSS/:visited'
-tags:
- - Псевдо-классы
-translation_of: 'Web/CSS/:visited'
----
-{{ CSSRef() }}
-
-Описание
-
-CSS псевдокласс :visited позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило :visited после правила :link до правил :hover и :active, как определено LVHA-порядком : :link — :visited — :hover — :active.
-
-
-
Замечание: Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ 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") }}, fill и stroke. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан0, то в этом случае будет использоваться цвет непосещённых ссылок.
-
-
Несмотря на то, что цвет может меняться, метод getComputedStyle наврёт и всегда будет давать значение цвета непосещённых ссылок.
-
-
Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited .
-
Примеры
-
-a:visited { color: #4b2f89; }
-a:visited { background-color: white }
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_visited/index.md b/files/ru/web/css/_colon_visited/index.md
new file mode 100644
index 00000000000000..4c015341c2aac4
--- /dev/null
+++ b/files/ru/web/css/_colon_visited/index.md
@@ -0,0 +1,34 @@
+---
+title: ':visited'
+slug: Web/CSS/:visited
+tags:
+ - Псевдо-классы
+translation_of: Web/CSS/:visited
+---
+{{ CSSRef() }}
+
+## Описание
+
+CSS [псевдокласс](/ru/docs/Web/CSS/Псевдо-классы "Pseudo-classes") `:visited` позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как {{ cssxref(":link") }}, {{ cssxref(":hover") }} и {{ cssxref(":active") }}, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило `:visited` после правила `:link` до правил `:hover` и `:active`, как определено _LVHA-порядком_: `:link` — `:visited` — `:hover` — `:active`.
+
+> **Примечание:** **Замечание:** Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только {{ 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") }}, `fill` и `stroke`. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан`0`, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод `getComputedStyle` наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите [Приватность и селектор :visited](/ru/docs/CSS/Privacy_and_the_:visited_selector).
+
+## Примеры
+
+```css
+a:visited { color: #4b2f89; }
+a:visited { background-color: white }
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Приватность и селектор :visited](/ru/docs/CSS/Privacy_and_the_:visited_selector)
+- Относящиеся к ссылкам псевдоклассы: {{cssxref(":link")}}, {{cssxref(":active")}} и {{cssxref(":hover")}}.
diff --git a/files/ru/web/css/_colon_where/index.html b/files/ru/web/css/_colon_where/index.html
deleted file mode 100644
index acee6e370a27b8..00000000000000
--- a/files/ru/web/css/_colon_where/index.html
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: ':where()'
-slug: 'Web/CSS/:where'
-tags:
- - ':where'
- - CSS
- - псевдокласс
-translation_of: 'Web/CSS/:where'
----
-{{CSSRef}}
-
-CSS псевдокласс :where() в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.
/* Выбирает любой параграф внутри header, main
- или footer на который наведён курсор мыши */
-:where(header, main, footer) p:hover {
- color: red;
- cursor: pointer;
-}
-
-/* Пример приведённый выше эквивалентен следующему */
-header p:hover,
-main p:hover,
-footer p:hover {
- color: red;
- cursor: pointer;
-}Разница между :where() и {{CSSxRef(":is", ":is()")}} заключается в том, что :where() всегда имеет нулевую специфичность селектора , тогда как специфичность :is() равна самому специфичному селектору из списка переданных аргументов.
-
-Парсинг forgiving-селектора
-
-В спецификации псевдоклассы :is() и :where() относятся к так называемому forgiving selector list (прощающий список селекторов).
-
-При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании :is() или :where() действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.
-
-:where(:valid, :unsupported) {
- ...
-}
-
-Пример выше будет успешно распарсен и для :valid будут применены CSS-правила, даже если в браузере не поддерживается :unsupported, в то время как:
-
-:valid, :unsupported {
- ...
-}
-
-Код будет полностью проигнорирован в браузерах, которые не поддерживают :unsupported, даже не смотря на то, что они поддерживают :valid.
-
-Примеры
-
-Сравнение :where() и :is()
-
-В этом примере показывается как работает :where(), а так же демонстрируется разница между :where() и :is().
-
-Возьмём следующий 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>.
- </section>
-
- <aside class="is-styling">
- <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
- </aside>
-
- <footer class="is-styling">
- <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
- </footer>
-</article>
-
-<article>
- <h2>:where()-styled links</h2>
- <section class="where-styling">
- <p>Here is my main content. This <a href="https://mozilla.org">contains a link</a>.
- </section>
-
- <aside class="where-styling">
- <p>Here is my aside content. This <a href="https://developer.mozilla.org">also contains a link</a>.
- </aside>
-
- <footer class="where-styling">
- <p>This is my footer, also containing <a href="https://github.com/mdn">a link</a>.
- </footer>
-</article>
-
-В примере выше у нас представлено две статьи, каждая из которых содержит следующие блоки: section, aside и footer. Каждый из блоков имеет свой CSS-класс.
-
-Теперь при помощи псевдоклассов :is() и :where() зададим цвет для ссылок в простой форме, как в примере ниже:
-
-html {
- font-family: sans-serif;
- font-size: 150%;
-}
-
-:is(section.is-styling, aside.is-styling, footer.is-styling) a {
- color: red;
-}
-
-:where(section.where-styling, aside.where-styling, footer.where-styling) a {
- color: orange;
-}
-
-Что если позже мы захотим переопределить цвет ссылок в footer'ах используя простой селектор?
-
-footer a {
- color: blue;
-}
-
-Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри :is() выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.
-
-В то время как, селекторы перечисленные внутри :where() имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.
-
-Примечание : вы так же можете найти этот пример на Github; смотрите is-where .
-
-{{EmbedLiveSample('Примеры', '100%', 600)}}
-
-Синтаксис
-
-{{CSSSyntax}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_colon_where/index.md b/files/ru/web/css/_colon_where/index.md
new file mode 100644
index 00000000000000..2147f97665a8ca
--- /dev/null
+++ b/files/ru/web/css/_colon_where/index.md
@@ -0,0 +1,144 @@
+---
+title: ':where()'
+slug: Web/CSS/:where
+tags:
+ - ':where'
+ - CSS
+ - псевдокласс
+translation_of: Web/CSS/:where
+---
+{{CSSRef}}[CSS](/ru/docs/Web/CSS) [псевдокласс ](/ru/docs/Web/CSS/Псевдо-классы)**`:where()` **в качестве аргумента принимает список селекторов и выбирает только те элементы, которые могут быть выбраны из переданного списка.
+
+```css
+/* Выбирает любой параграф внутри header, main
+ или footer на который наведён курсор мыши */
+:where(header, main, footer) p:hover {
+ color: red;
+ cursor: pointer;
+}
+
+/* Пример приведённый выше эквивалентен следующему */
+header p:hover,
+main p:hover,
+footer p:hover {
+ color: red;
+ cursor: pointer;
+}
+```
+
+Разница между `:where()` и {{CSSxRef(":is", ":is()")}} заключается в том, что `:where()` всегда имеет нулевую [специфичность селектора](ru/docs/Web/CSS/Specificity), тогда как специфичность `:is()` равна самому специфичному селектору из списка переданных аргументов.
+
+### Парсинг forgiving-селектора
+
+В спецификации псевдоклассы `:is()` и `:where()` относятся к так называемому [forgiving selector list](https://drafts.csswg.org/selectors-4/#typedef-forgiving-selector-list) (прощающий список селекторов).
+
+При использовании списка селекторов в CSS, если один из селекторов невалидный, то весь список селекторов будет считаться невалидным. В то же время при использовании `:is()` или `:where()` действует другое правило: если среди переданных аргументов будет некорректный или неподдерживаемый селектор, то он будет проигнорирован, для всех же остальных селекторов будут применены CSS-правила.
+
+```css
+:where(:valid, :unsupported) {
+ ...
+}
+```
+
+Пример выше будет успешно распарсен и для `:valid` будут применены CSS-правила, даже если в браузере не поддерживается `:unsupported`, в то время как:
+
+```css
+:valid, :unsupported {
+ ...
+}
+```
+
+Код будет полностью проигнорирован в браузерах, которые не поддерживают `:unsupported`, даже не смотря на то, что они поддерживают `:valid`.
+
+## Примеры
+
+### Сравнение :where() и :is()
+
+В этом примере показывается как работает `:where()`, а так же демонстрируется разница между `:where()` и `:is()`.
+
+Возьмём следующий HTML-код:
+
+```html
+
+ :is()-styled links
+
+
+
+
+
+
+
+
+ :where()-styled links
+
+
+
+
+
+
+```
+
+В примере выше у нас представлено две статьи, каждая из которых содержит следующие блоки: `section`, `aside` и `footer`. Каждый из блоков имеет свой CSS-класс.
+
+Теперь при помощи псевдоклассов `:is()` и `:where()` зададим цвет для ссылок в простой форме, как в примере ниже:
+
+```css
+html {
+ font-family: sans-serif;
+ font-size: 150%;
+}
+
+:is(section.is-styling, aside.is-styling, footer.is-styling) a {
+ color: red;
+}
+
+:where(section.where-styling, aside.where-styling, footer.where-styling) a {
+ color: orange;
+}
+```
+
+Что если позже мы захотим переопределить цвет ссылок в `footer`'ах используя простой селектор?
+
+```css
+footer a {
+ color: blue;
+}
+```
+
+Это не будет работать для ссылок красного цвета, потому что специфичность селекторов внутри `:is()` выше, чем специфичность селектора вышеприведённого кода. Селектор классов имеет бо́льшую специфичность, чем селектор элемента.
+
+В то время как, селекторы перечисленные внутри `:where()` имеют нулевую специфичность, поэтому оранжевая ссылка в футере будет переопределена простым селектором и станет синего цвета.
+
+**Примечание**: вы так же можете найти этот пример на Github; смотрите [is-where](https://mdn.github.io/css-examples/is-where/).
+
+{{EmbedLiveSample('Примеры', '100%', 600)}}
+
+## Синтаксис
+
+{{CSSSyntax}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{CSSxRef(":is", ":is()")}}
+- [Список селекторов](/ru/docs/Web/CSS/Selector_list)
+- [Веб-компоненты](/ru/docs/Web/Web_Components)
diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
deleted file mode 100644
index 88795d4cd9f534..00000000000000
--- a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
----
-title: '::-moz-progress-bar'
-slug: 'Web/CSS/::-moz-progress-bar'
-translation_of: 'Web/CSS/::-moz-progress-bar'
----
-
-
-{{CSSRef}}{{Non-standard_header}}
-
-Представляет собой индикатор прогресса внутри {{HTMLElement("progress")}} (Бар, отражающий текущий прогресс).
-
-Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML
-
-<progress value="30" max="100">30%</progress>
-<progress max="100">Неопределённый бар прогресса</progress>
-
-CSS
-
-::-moz-progress-bar {
- background-color: red;
-}
-
-/* Задаёт неопределённым барам нулевую ширину */
-:indeterminate::-moz-progress-bar {
- width: 0;
-}
-
-Результат
-
-{{EmbedLiveSample('Примеры')}}
-
-Первый бар сверху должен выглядеть так:
-
-
-
-Смотрите также
-
-
- {{HTMLElement("progress")}}
- {{ cssxref("::-ms-fill") }}
- {{ cssxref("::-webkit-progress-bar") }}
- {{ cssxref("::-webkit-progress-value") }}
- {{ cssxref("::-webkit-progress-inner-element") }}
-
diff --git a/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md
new file mode 100644
index 00000000000000..5c6e62842f3a33
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-moz-progress-bar/index.md
@@ -0,0 +1,50 @@
+---
+title: '::-moz-progress-bar'
+slug: Web/CSS/::-moz-progress-bar
+translation_of: Web/CSS/::-moz-progress-bar
+---
+{{CSSRef}}{{Non-standard_header}}
+
+Представляет собой индикатор прогресса внутри {{HTMLElement("progress")}} (Бар, отражающий текущий прогресс).
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### HTML
+
+```html
+30%
+Неопределённый бар прогресса
+```
+
+### CSS
+
+```css
+::-moz-progress-bar {
+ background-color: red;
+}
+
+/* Задаёт неопределённым барам нулевую ширину */
+:indeterminate::-moz-progress-bar {
+ width: 0;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Примеры')}}
+
+Первый бар сверху должен выглядеть так:
+
+
+
+## Смотрите также
+
+- {{HTMLElement("progress")}}
+- {{ cssxref("::-ms-fill") }}
+- {{ cssxref("::-webkit-progress-bar") }}
+- {{ cssxref("::-webkit-progress-value") }}
+- {{ cssxref("::-webkit-progress-inner-element") }}
diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
deleted file mode 100644
index 828d7235e9fe68..00000000000000
--- a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.html
+++ /dev/null
@@ -1,28 +0,0 @@
----
-title: '::-webkit-slider-thumb'
-slug: 'Web/CSS/::-webkit-slider-thumb'
-translation_of: 'Web/CSS/::-webkit-slider-thumb'
----
-{{CSSRef}}{{Non-standard_header}}
-
-Описание
-
-Псевдоэлемент CSS ::-webkit-slider-thumb "range" для изменения числового значения атрибута value .
-
-Спецификация
-
-Не является частью какой либо спецификации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md
new file mode 100644
index 00000000000000..986f1351752792
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_-webkit-slider-thumb/index.md
@@ -0,0 +1,25 @@
+---
+title: '::-webkit-slider-thumb'
+slug: Web/CSS/::-webkit-slider-thumb
+translation_of: Web/CSS/::-webkit-slider-thumb
+---
+{{CSSRef}}{{Non-standard_header}}
+
+## Описание
+
+`Псевдоэлемент CSS ::-webkit-slider-thumb` представляет собой ползунок, передвигаемый пользователем по линейке элемента {{HTMLElement("input")}} типа `"range"` для изменения числового значения атрибута [value](en-US/docs/Web/HTML/Element/input#attr-value).
+
+## Спецификация
+
+Не является частью какой либо спецификации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.
+
+## Смотрите также
+
+- {{cssxref("::-webkit-slider-runnable-track")}}
+- Похожие псевдоэлементы использующиеся в других браузерах:
+
+ - {{cssxref("::-moz-range-thumb")}}
+ - {{cssxref("::-ms-thumb")}}
+
+- [CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS](https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/)
+- [QuirksMode: Styling and scripting sliders](http://www.quirksmode.org/blog/archives/2015/11/styling_and_scr.html)
diff --git a/files/ru/web/css/_doublecolon_after/index.html b/files/ru/web/css/_doublecolon_after/index.html
deleted file mode 100644
index 062c1826d0816f..00000000000000
--- a/files/ru/web/css/_doublecolon_after/index.html
+++ /dev/null
@@ -1,142 +0,0 @@
----
-title: '::after (:after)'
-slug: 'Web/CSS/::after'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоэлементы
-translation_of: 'Web/CSS/::after'
----
-{{CSSRef}}
-
-В CSS, ::afterпсевдоэлемент , который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчанию является инлайновым.
-
-
-a::after {
- content: " →";
-} Синтаксис
-
-{{csssyntax}}
-
-
-
В CSS3 появилась запись ::after (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов . Браузеры также поддерживают запись :after, введённую в CSS2.
-
Примеры
-
-Простое использование
-
-Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.
-
-HTML
-
-<p class="boring-text">Вот простой скучный текст.</p>
-<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
-<p class="exciting-text">Помогать MDN легко и весело.
-Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.</p>
-
-CSS
-
-.exciting-text::after {
- content: "<- теперь это *просто* потрясающе!";
- color: green;
-}
-
-.boring-text::after {
- content: "<- СКУЧНО!";
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample('Простое_использование', 500, 150)}}
-
-Пример оформления
-
-Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.
-
-HTML
-
-<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
-
-CSS
-
-.ribbon {
- background-color: #5BC8F7;
-}
-
-.ribbon::after {
- content: "Посмотрите на этот оранжевый прямоугольник.";
- background-color: #FFBA10;
- border-color: black;
- border-style: dotted;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример_оформления', 450, 20)}}
-
-Подсказки
-
-Следующий пример показывает использование псевдоэлемента ::after в сочетании с CSS-выражением attr()пользовательского data-* атрибута data-descr для создания подсказки на чистом CSS.
-
-HTML
-
-<p>Здесь находится живой пример вышеприведённого кода.<br />
- У нас есть некоторый <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с несколькими
- <span data-descr="маленькие всплывающие окошки, которые снова исчезают">подсказками</span>.<br />
- Не стесняйтесь, наводите мышку чтобы <span data-descr="не понимать буквально">взглянуть</span>.
-</p>
-
-
-CSS
-
-span[data-descr] {
- position: relative;
- text-decoration: underline;
- color: #00F;
- cursor: help;
-}
-
-span[data-descr]:hover::after {
- content: attr(data-descr);
- position: absolute;
- left: 0;
- top: 24px;
- min-width: 200px;
- border: 1px #aaaaaa solid;
- border-radius: 10px;
- background-color: #ffffcc;
- padding: 12px;
- color: #000000;
- font-size: 14px;
- z-index: 1;
-}
-
-Результат
-
-{{EmbedLiveSample('Подсказки', 450, 120)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{Cssxref("::before")}}, {{cssxref("content")}}
-
diff --git a/files/ru/web/css/_doublecolon_after/index.md b/files/ru/web/css/_doublecolon_after/index.md
new file mode 100644
index 00000000000000..e841dc011fa873
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_after/index.md
@@ -0,0 +1,147 @@
+---
+title: '::after (:after)'
+slug: Web/CSS/::after
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоэлементы
+translation_of: Web/CSS/::after
+---
+{{CSSRef}}
+
+В CSS, **`::after`** создаёт [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements), который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчанию является инлайновым.
+
+```css
+/* Добавить стрелки после ссылок */
+a::after {
+ content: "→";
+}
+```
+
+> **Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
+
+## Синтаксис
+
+{{csssyntax}}
+
+> **Примечание:** В CSS3 появилась запись `::after` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Псевдо-классы) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:after`, введённую в CSS2.
+
+## Примеры
+
+### Простое использование
+
+Давайте создадим два класса, один для скучных параграфов и один для потрясающих. Затем мы сможем отметить каждый параграф добавлением псевдоэлемента в его конец.
+
+#### HTML
+
+```html
+Вот простой скучный текст.
+Вот нормальный текст, который не является ни скучным, ни потрясающим.
+Помогать MDN легко и весело.
+Просто нажмите кнопку редактирования, чтобы добавить новые живые примеры, или улучшить существующие примеры.
+```
+
+#### CSS
+
+```css
+.exciting-text::after {
+ content: "<- теперь это *просто* потрясающе!";
+ color: green;
+}
+
+.boring-text::after {
+ content: "<- СКУЧНО!";
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Простое_использование', 500, 150)}}
+
+### Пример оформления
+
+Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.
+
+#### HTML
+
+```html
+Посмотрите, где находится оранжевый прямоугольник.
+```
+
+#### CSS
+
+```css
+.ribbon {
+ background-color: #5BC8F7;
+}
+
+.ribbon::after {
+ content: "Посмотрите на этот оранжевый прямоугольник.";
+ background-color: #FFBA10;
+ border-color: black;
+ border-style: dotted;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Пример_оформления', 450, 20)}}
+
+### Подсказки
+
+Следующий пример показывает использование [псевдоэлемента](/ru/docs/Web/CSS/Pseudo-elements) `::after` в сочетании с CSS-выражением [`attr()`](/ru/docs/Web/CSS/attr) и [пользовательского `data-*` атрибута](/ru/docs/Web/HTML/Global_attributes#attr-dataset) `data-descr` для создания _подсказки_ на чистом CSS.
+
+#### HTML
+
+```html
+Здесь находится живой пример вышеприведённого кода.текст здесь с несколькими
+ подсказками .взглянуть .
+
+```
+
+#### CSS
+
+```css
+span[data-descr] {
+ position: relative;
+ text-decoration: underline;
+ color: #00F;
+ cursor: help;
+}
+
+span[data-descr]:hover::after {
+ content: attr(data-descr);
+ position: absolute;
+ left: 0;
+ top: 24px;
+ min-width: 200px;
+ border: 1px #aaaaaa solid;
+ border-radius: 10px;
+ background-color: #ffffcc;
+ padding: 12px;
+ color: #000000;
+ font-size: 14px;
+ z-index: 1;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Подсказки', 450, 120)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{Cssxref("::before")}}, {{cssxref("content")}}
diff --git a/files/ru/web/css/_doublecolon_backdrop/index.html b/files/ru/web/css/_doublecolon_backdrop/index.html
deleted file mode 100644
index 57601ca096aac1..00000000000000
--- a/files/ru/web/css/_doublecolon_backdrop/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: '::backdrop'
-slug: 'Web/CSS/::backdrop'
-tags:
- - API
- - CSS
- - Dialog
- - Fullscreen API
- - HTML DOM
- - Полный экран
- - Псевдо-элемент
- - Разметка
- - диалоговое окно
- - полноэкранный режим
-translation_of: 'Web/CSS/::backdrop'
----
-{{CSSRef}}
-
-CSS псевдо-элемент ::backdropFullscreen API и элементы {{HTMLElement("dialog")}}.
-
-Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.
-
-/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
-dialog::backdrop {
- background: rgba(255,0,0,.25);
-}
-
-Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент ::backdrop позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.
-
-::backdrop не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.
-
-Синтаксис
-
-{{CSSSyntax}}
-
-Примеры
-
-В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.
-
-video::backdrop {
- background-color: #448;
-}
-
-
-В результате окно выглядит так:
-
-
-
-Обратите внимание на эффект серо-голубых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{cssxref(":fullscreen")}} псевдокласс
- {{HTMLElement("dialog")}} HTML-элемент
- Fullscreen API
diff --git a/files/ru/web/css/_doublecolon_backdrop/index.md b/files/ru/web/css/_doublecolon_backdrop/index.md
new file mode 100644
index 00000000000000..49ea3e0782b63d
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_backdrop/index.md
@@ -0,0 +1,66 @@
+---
+title: '::backdrop'
+slug: Web/CSS/::backdrop
+tags:
+ - API
+ - CSS
+ - Dialog
+ - Fullscreen API
+ - HTML DOM
+ - Полный экран
+ - Псевдо-элемент
+ - Разметка
+ - диалоговое окно
+ - полноэкранный режим
+translation_of: Web/CSS/::backdrop
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдо-элемент](/ru/docs/Web/CSS/Pseudo-elements) **`::backdrop`** это прямоугольник с размерами {{Glossary("viewport", "окна")}}, который отрисовывается сразу же после отрисовки любого элемента в полноэкранном режиме. Это включает элементы, установленные в полноэкранный режим с помощью [Fullscreen API](/ru/docs/DOM/Using_fullscreen_mode) и элементы {{HTMLElement("dialog")}}.
+
+Когда несколько элементов находятся в полноэкранном режиме, подложка появляется под тем из них, который находится на переднем плане и над всеми остальными.
+
+```css
+/* Подложка показывается только тогда, когда диалоговое окно открыто с помощью метода dialog.showModal() */
+dialog::backdrop {
+ background: rgba(255,0,0,.25);
+}
+```
+
+Все полноэкранные элементы появляются в порядке last-in/first out (LIFO - последним пришёл - первым ушёл) на специальном верхнем слое окна, который всегда отрисовывается последним (поэтому поверх остальных) до отрисовки содержимого окна. Псевдо-элемент `::backdrop` позволяет затемнить, стилизовать или полностью спрятать всё, что находится под элементом, когда он находится на этом верхнем слое.
+
+`::backdrop` не наследует от других элементов и другие элементы не могут от него наследовать. Нет никаких ограничений на свойства, которые можно применять к этому псевдо-элементу.
+
+## Синтаксис
+
+{{CSSSyntax}}
+
+## Примеры
+
+В этом примере, стиль подложки при открытии видео в полноэкранном режиме делаёт её серо-голубой, а не серой, какой она является по стандарту в большинстве браузеров.
+
+```css
+video::backdrop {
+ background-color: #448;
+}
+```
+
+В результате окно выглядит так:
+
+
+
+Обратите внимание на эффект серо-голубых полей сверху и снизу, где подложка видна. Обычно эта область чёрная, но её цвет изменён с помощью CSS кода выше.
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref(":fullscreen")}} псевдокласс
+- {{HTMLElement("dialog")}} HTML-элемент
+- [Fullscreen API](/ru/docs/DOM/Using_fullscreen_mode)
diff --git a/files/ru/web/css/_doublecolon_before/index.html b/files/ru/web/css/_doublecolon_before/index.html
deleted file mode 100644
index f4df71dd3349d4..00000000000000
--- a/files/ru/web/css/_doublecolon_before/index.html
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: '::before (:before)'
-slug: 'Web/CSS/::before'
-tags:
- - CSS
- - Layout
- - Reference
- - Web
- - Псевдоэлементы
-translation_of: 'Web/CSS/::before'
----
-{{CSSRef}}
-
-В CSS, ::beforeпсевдоэлемент ,который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчания является инлайновым.
-
-Добавить сердце перед ссылками
-a::before {
- content: " ♥";
-} Синтаксис
-
-{{csssyntax}}
-
-
-
В CSS3 появилась запись ::before (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов . Браузеры также поддерживают запись :before, введённую в CSS2.
-
Примеры
-
-Добавление кавычек
-
-Этот простой пример использования псевдоэлементов ::before позволяет добавлять кавычки. Здесь используется как псевдоэлемент ::before, так и {{Cssxref("::after")}}.
-
-HTML
-
-<q>Немного кавычек</q>, как он сказал, <q>лучше чем ничего.</q>
-
-CSS
-
-q::before {
- content: "«";
- color: blue;
-}
-
-q::after {
- content: "»";
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}
-
-Пример оформления
-
-Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.
-
-HTML
-
-<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
-
-CSS
-
-.ribbon {
- background-color: #5BC8F7;
-}
-
-.ribbon::before {
- content: "Посмотрите на этот оранжевый прямоугольник.";
- background-color: #FFBA10;
- border-color: black;
- border-style: dotted;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример_оформления', 450, 60)}}
-
-Список дел
-
-В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.
-
-HTML
-
-<ul>
- <li>Купить молока</li>
- <li>Сходить на прогулку с собакой</li>
- <li>Тренироваться</li>
- <li>Написать код</li>
- <li>Слушать музыку</li>
- <li>Отдыхать</li>
-</ul>
-
-
-CSS
-
-li {
- list-style-type: none;
- position: relative;
- margin: 2px;
- padding: 0.5em 0.5em 0.5em 2em;
- background: lightgrey;
- font-family: sans-serif;
-}
-
-li.done {
- background: #CCFF99;
-}
-
-li.done::before {
- content: '';
- position: absolute;
- border-color: #009933;
- border-style: solid;
- border-width: 0 0.3em 0.25em 0;
- height: 1em;
- top: 1.3em;
- left: 0.6em;
- margin-top: -1em;
- transform: rotate(45deg);
- width: 0.5em;
-}
-
-JavaScript
-
-var list = document.querySelector('ul');
-list.addEventListener('click', function(ev) {
- if( ev.target.tagName === 'LI') {
- ev.target.classList.toggle('done');
- }
-}, false);
-
-
-Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом ::before, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.
-
-Результат
-
-{{EmbedLiveSample('Список_дел', 400, 300)}}
-
-Примечания
-
-Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно спецификации CSS : "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент <span>, как в примере ниже, вместо того чтобы добавлять два пустых элемента <div/> до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)
-
-HTML
-
-<div class="example">
-<span id="floatme">"Плавающий перед" будет добавлен слева от текста
-и не позволит переполнению этой строки обтекать его снизу.
-Аналогично, "Плавающий после" будет добавлен справа от текста
-и не позволит переполнению этой строки обтекать его снизу.</span>
-</div>
-
-CSS
-
-#floatme { float: left; width: 50%; }
-
-/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
-.example::before {
- content: "Плавающий перед";
- float: left;
- width: 25%
-}
-.example::after {
- content: "Плавающий после";
- float: right;
- width:25%
-}
-
-/* Для стилизации */
-.example::before, .example::after {
- background: yellow;
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample("Примечания")}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{Cssxref("::after")}}
- {{Cssxref("content")}}
-
diff --git a/files/ru/web/css/_doublecolon_before/index.md b/files/ru/web/css/_doublecolon_before/index.md
new file mode 100644
index 00000000000000..ac63b7ba58e3ab
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_before/index.md
@@ -0,0 +1,209 @@
+---
+title: '::before (:before)'
+slug: Web/CSS/::before
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Web
+ - Псевдоэлементы
+translation_of: Web/CSS/::before
+---
+{{CSSRef}}
+
+В CSS, **`::before`** создаёт [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements),который является первым потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства {{cssxref("content")}}. По умолчания является инлайновым.
+
+```css
+/* Добавить сердце перед ссылками */
+a::before {
+ content: "♥";
+}
+```
+
+> **Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` [содержатся в блоке форматирования элемента](https://www.w3.org/TR/CSS2/generate.html#before-after-content), и поэтому не применяются к _[замещаемым элементам](/ru/docs/Web/CSS/Replaced_element)_, таким как {{htmlelement("img")}} или {{htmlelement("br")}}.
+
+## Синтаксис
+
+{{csssyntax}}
+
+> **Примечание:** В CSS3 появилась запись `::before` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:before`, введённую в CSS2.
+
+## Примеры
+
+### Добавление кавычек
+
+Этот простой пример использования псевдоэлементов `::before` позволяет добавлять кавычки. Здесь используется как псевдоэлемент `::before`, так и `{{Cssxref("::after")}}`.
+
+#### HTML
+
+```html
+Немного кавычек , как он сказал, лучше чем ничего.
+```
+
+#### CSS
+
+```css
+q::before {
+ content: "«";
+ color: blue;
+}
+
+q::after {
+ content: "»";
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Добавление_кавычек', '500', '50', '')}}
+
+### Пример оформления
+
+Можно стилизовать текст или изображения в свойстве {{cssxref("content")}} практически любым способом.
+
+#### HTML
+
+```html
+Посмотрите, где находится оранжевый прямоугольник.
+```
+
+#### CSS
+
+```css
+.ribbon {
+ background-color: #5BC8F7;
+}
+
+.ribbon::before {
+ content: "Посмотрите на этот оранжевый прямоугольник.";
+ background-color: #FFBA10;
+ border-color: black;
+ border-style: dotted;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Пример_оформления', 450, 60)}}
+
+### Список дел
+
+В этом примере мы создадим простой список дел,используя псевдоэлементы. Этот метод часто применяется для добавления небольших штрихов в пользовательский интерфейс и улучшения впечатления пользователей.
+
+#### HTML
+
+```html
+
+ Купить молока
+ Сходить на прогулку с собакой
+ Тренироваться
+ Написать код
+ Слушать музыку
+ Отдыхать
+
+```
+
+#### CSS
+
+```css
+li {
+ list-style-type: none;
+ position: relative;
+ margin: 2px;
+ padding: 0.5em 0.5em 0.5em 2em;
+ background: lightgrey;
+ font-family: sans-serif;
+}
+
+li.done {
+ background: #CCFF99;
+}
+
+li.done::before {
+ content: '';
+ position: absolute;
+ border-color: #009933;
+ border-style: solid;
+ border-width: 0 0.3em 0.25em 0;
+ height: 1em;
+ top: 1.3em;
+ left: 0.6em;
+ margin-top: -1em;
+ transform: rotate(45deg);
+ width: 0.5em;
+}
+```
+
+#### JavaScript
+
+```js
+var list = document.querySelector('ul');
+list.addEventListener('click', function(ev) {
+ if( ev.target.tagName === 'LI') {
+ ev.target.classList.toggle('done');
+ }
+}, false);
+```
+
+Вот живой пример приведённого выше кода. Заметим, что здесь не используются иконки, а зелёная галочка на самом деле является псевдоэлементом `::before`, стилизованном с помощью CSS. Попробуйте выполнить некоторые вещи списка.
+
+#### Результат
+
+{{EmbedLiveSample('Список_дел', 400, 300)}}
+
+## Примечания
+
+Хотя исправления в Firefox 3.5 не позволяют созданному содержимому вести себя как отдельный предшествующий элемент (согласно [спецификации CSS](http://www.w3.org/TR/CSS21/generate.html#before-after-content): "Псевдоэлементы :before и :after взаимодействуют с другими элементами... как если бы они были настоящими элементами, добавленными в соответствующий им элемент."), они могут быть использованы для небольшого улучшения в разметке без таблиц (например для центрирования). В предположении, что содержимое, которое необходимо центрировать, уже обёрнуто в некоторый элемент, столбцы перед и после содержимого могут быть добавлены без добавления других элементов (например в данном случае вероятно является более корректным обернуть текст в элемент ``, как в примере ниже, вместо того чтобы добавлять два пустых элемента `
` до и после текста). (И всегда устанавливайте ширину плавающего элемента, иначе он не будет плавающим!)
+
+#### HTML
+
+```html
+
+"Плавающий перед" будет добавлен слева от текста
+и не позволит переполнению этой строки обтекать его снизу.
+Аналогично, "Плавающий после" будет добавлен справа от текста
+и не позволит переполнению этой строки обтекать его снизу.
+
+```
+
+#### CSS
+
+```css
+#floatme { float: left; width: 50%; }
+
+/* Чтобы получить пустой столбец достаточно указать шестнадцатеричный код неразрывного пробела \a0 в качестве содержимого (используйте \0000a0, если за этим пробелом следуют другие символы) */
+.example::before {
+ content: "Плавающий перед";
+ float: left;
+ width: 25%
+}
+.example::after {
+ content: "Плавающий после";
+ float: right;
+ width:25%
+}
+
+/* Для стилизации */
+.example::before, .example::after {
+ background: yellow;
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample("Примечания")}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{Cssxref("::after")}}
+- {{Cssxref("content")}}
diff --git a/files/ru/web/css/_doublecolon_cue/index.html b/files/ru/web/css/_doublecolon_cue/index.html
deleted file mode 100644
index 18dfb0992ea948..00000000000000
--- a/files/ru/web/css/_doublecolon_cue/index.html
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: '::cue'
-slug: 'Web/CSS/::cue'
-translation_of: 'Web/CSS/::cue'
----
-{{CSSRef}}
-
-Псевдоэлемент CSS ::cueWebVTT в выбранном элементе. Он может быть использован для задания стилей титров и других реплик в медиа с VTT треками.
-
-::cue {
- color: yellow;
- font-weight: bold;
-}
-
-Разрешённые свойства
-
-Правила с ::cue в селекторе ограничены в использовании CSS-свойств следующим списком:
-
-
- {{CSSxRef("background")}} и его свойства
- {{CSSxRef("color")}}
- {{CSSxRef("font")}} и его свойства
- {{CSSxRef("line-height")}}
- {{CSSxRef("opacity")}}
- {{CSSxRef("outline")}} и его свойства
- {{CSSxRef("ruby-position")}}
- {{CSSxRef("text-combine-upright")}}
- {{CSSxRef("text-decoration")}} и его свойства
- {{CSSxRef("text-shadow")}}
- {{CSSxRef("visibility")}}
- {{CSSxRef("white-space")}}
-
-
-Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является background и его сокращённые свойства, которые применяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.
-
-Синтаксис
-
-{{CSSSyntax}}
-
-Пример
-
-Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.
-
-::cue {
- color: #fff;
- background-color: rgba(0, 0, 0, 0.6);
-}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_doublecolon_cue/index.md b/files/ru/web/css/_doublecolon_cue/index.md
new file mode 100644
index 00000000000000..32efd822b940d6
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_cue/index.md
@@ -0,0 +1,61 @@
+---
+title: '::cue'
+slug: Web/CSS/::cue
+translation_of: Web/CSS/::cue
+---
+{{CSSRef}}
+
+[Псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) [CSS](/ru/docs/Web/CSS) **`::cue`** соответствует репликам [WebVTT](/ru/docs/Web/API/WebVTT_API) в выбранном элементе. Он может быть использован для задания [стилей титров и других реплик](/docs/Web/API/WebVTT_API#Styling_WebTT_cues) в медиа с VTT треками.
+
+```css
+::cue {
+ color: yellow;
+ font-weight: bold;
+}
+```
+
+## Разрешённые свойства
+
+Правила с `::cue` в селекторе ограничены в использовании CSS-свойств следующим списком:
+
+- {{CSSxRef("background")}} и его свойства
+- {{CSSxRef("color")}}
+- {{CSSxRef("font")}} и его свойства
+- {{CSSxRef("line-height")}}
+- {{CSSxRef("opacity")}}
+- {{CSSxRef("outline")}} и его свойства
+- {{CSSxRef("ruby-position")}}
+- {{CSSxRef("text-combine-upright")}}
+- {{CSSxRef("text-decoration")}} и его свойства
+- {{CSSxRef("text-shadow")}}
+- {{CSSxRef("visibility")}}
+- {{CSSxRef("white-space")}}
+
+Свойства применяются ко всему набору реплик, как если бы они были единым целым. Единственным исключением является `background` и его сокращённые свойства, которые применяются к каждой реплике отдельно, чтобы не создавать блоки, которые занимают неожиданно большие области медиа.
+
+## Синтаксис
+
+{{CSSSyntax}}
+
+## Пример
+
+Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.
+
+```css
+::cue {
+ color: #fff;
+ background-color: rgba(0, 0, 0, 0.6);
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Web Video Tracks Format (WebVTT)](/ru/docs/Web/API/WebVTT_API)
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.html b/files/ru/web/css/_doublecolon_first-letter/index.html
deleted file mode 100644
index 1f415288e00521..00000000000000
--- a/files/ru/web/css/_doublecolon_first-letter/index.html
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: '::first-letter (:first-letter)'
-slug: 'Web/CSS/::first-letter'
-tags:
- - CSS
- - Layout
- - Reference
- - Псевдоэлементы
-translation_of: 'Web/CSS/::first-letter'
----
-{{CSSRef}}
-
-CSS псевдоэлемент ::first-letterблочного элемента , но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).
-
-/* Стили для первой буквы элемента <p> */
-p::first-letter {
- font-size: 130%;
-}
-
-Может быть непросто определить первую букву элемента:
-
-
- Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах open (Ps), close (Pe), initial quote (Pi), final quote (Pf), and other punctuation (Po).
- В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например IJ в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу ::first-letter (это слабо поддерживается браузерами, смотрите таблицу совместимости ниже).
- Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу ::first-letter будет соответствовать первая буква добавленного содержимого.
-
-
-
-
В CSS3 появилась запись ::first-letter (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов . Браузеры также поддерживают запись :first-letter, введённую в CSS2.
-
Разрешённые свойства
-
-Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-letter:
-
-
- Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}
- Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}
- Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}
- Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}
- Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств
- Свойства {{ cssxref("color") }}
- Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если float равен none)
-
-
-Синтаксис
-
-{{csssyntax}}
-
-Пример
-
-Сделаем первую букву каждого абзаца красной и большой.
-
-HTML
-
-<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
- ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
- dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.</p>
-<p>Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p>
-<p>Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
- aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
- esse molestie consequat.</p>
-<p>-Начало специального знака препинания.</p>
-<p>_Начало специального знака препинания.</p>
-<p>"Начало специального знака препинания.</p>
-<p>'Начало специального знака препинания.</p>
-<p>*Начало специального знака препинания.</p>
-<p>#Начало специального знака препинания.</p>
-<p>「特殊的汉字标点符号开头。</p>
-<p>《特殊的汉字标点符号开头。</p>
-<p>“特殊的汉字标点符号开头。</p>
-
-CSS
-
-p::first-letter {
- color: red;
- font-size: 130%;
-}
-
-Результат
-
-{{ EmbedLiveSample('Example', '80%', 420) }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{cssxref("::first-line")}}
-
diff --git a/files/ru/web/css/_doublecolon_first-letter/index.md b/files/ru/web/css/_doublecolon_first-letter/index.md
new file mode 100644
index 00000000000000..7429e095c8f39c
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-letter/index.md
@@ -0,0 +1,94 @@
+---
+title: '::first-letter (:first-letter)'
+slug: Web/CSS/::first-letter
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Псевдоэлементы
+translation_of: Web/CSS/::first-letter
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::first-letter`** применяет стили к первой букве первой строки [блочного элемента](/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes), но только если нету другого предшествующего содержимого (такого как изображения или инлайн таблицы).
+
+```css
+/* Стили для первой буквы элемента */
+p::first-letter {
+ font-size: 130%;
+}
+```
+
+Может быть непросто определить первую букву элемента:
+
+- Пунктуация, которая предшествует или следует сразу за первой буквой, включается в селектор. Пунктуация включает любой символ Юникода, определённый в классах _open_ (Ps), _close_ (Pe), _initial quote_ (Pi), _final quote_ (Pf), and _other punctuation_ (Po).
+- В некоторых языках существуют диграфы, которые должны преобразовываться в верхний регистр вместе, например `IJ` в Нидерландском. В этих случаях обе буквы диграфа должны соответствовать псевдоэлементу `::first-letter` (это слабо поддерживается браузерами, смотрите [таблицу совместимости](/En/CSS/::first-letter#Browser_compatibility "https://developer.mozilla.org/En/CSS/::first-letter#Browser_compatibility") ниже).
+- Комбинация псевдоэлемента {{ cssxref("::before") }} и свойства {{ cssxref("content") }} может привести к добавлению некоторого текста в начало элемента. В этом случае псевдоэлементу `::first-letter` будет соответствовать первая буква добавленного содержимого.
+
+> **Примечание:** В CSS3 появилась запись `::first-letter` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-letter`, введённую в CSS2.
+
+## Разрешённые свойства
+
+Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::first-letter`:
+
+- Все свойства, связанные с шрифтами: {{ Cssxref("font") }}, {{ Cssxref("font-style") }}, {{cssxref("font-feature-settings")}}, {{cssxref("font-kerning")}}, {{cssxref("font-language-override")}}, {{cssxref("font-stretch")}}, {{cssxref("font-synthesis")}}, {{ Cssxref("font-variant") }}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{ Cssxref("font-weight") }}, {{ Cssxref("font-size") }}, {{cssxref("font-size-adjust")}}, {{ Cssxref("line-height") }} и {{ Cssxref("font-family") }}
+- Все свойства, связанные с фоном: {{ Cssxref("background") }}, {{ Cssxref("background-color") }}, {{ Cssxref("background-image") }}, {{cssxref("background-clip")}}, {{cssxref("background-origin")}}, {{ Cssxref("background-position") }}, {{ Cssxref("background-repeat") }}, {{ cssxref("background-size") }}, {{ Cssxref("background-attachment") }} и {{cssxref("background-blend-mode")}}
+- Все свойства для внешних отступов: {{ Cssxref("margin") }}, {{ Cssxref("margin-top") }}, {{ Cssxref("margin-right") }}, {{ Cssxref("margin-bottom") }}, {{ Cssxref("margin-left") }}
+- Все свойства для внутренних отступов: {{ Cssxref("padding") }}, {{ Cssxref("padding-top") }}, {{ Cssxref("padding-right") }}, {{ Cssxref("padding-bottom") }}, {{ Cssxref("padding-left") }}
+- Все свойства, связанные с рамкой: сокращения {{ Cssxref("border") }}, {{ Cssxref("border-style") }}, {{ Cssxref("border-color") }}, {{ cssxref("border-width") }}, {{ cssxref("border-radius") }}, {{cssxref("border-image")}} и полные записи свойств
+- Свойства {{ cssxref("color") }}
+- Свойства {{ cssxref("text-decoration") }}, {{cssxref("text-shadow")}}, {{ cssxref("text-transform") }}, {{ cssxref("letter-spacing") }}, {{ cssxref("word-spacing") }} (when appropriate), {{ cssxref("line-height") }}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}}, {{cssxref("box-shadow")}}, {{ cssxref("float") }}, {{ cssxref("vertical-align") }} (только если `float` равен `none`)
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+Сделаем первую букву каждого абзаца красной и большой.
+
+### HTML
+
+```html
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt
+ ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+ dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est.
+Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.
+Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut
+ aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit
+ esse molestie consequat.
+-Начало специального знака препинания.
+_Начало специального знака препинания.
+"Начало специального знака препинания.
+'Начало специального знака препинания.
+*Начало специального знака препинания.
+#Начало специального знака препинания.
+「特殊的汉字标点符号开头。
+《特殊的汉字标点符号开头。
+“特殊的汉字标点符号开头。
+```
+
+### CSS
+
+```css
+p::first-letter {
+ color: red;
+ font-size: 130%;
+}
+```
+
+### Результат
+
+{{ EmbedLiveSample('Example', '80%', 420) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("::first-line")}}
diff --git a/files/ru/web/css/_doublecolon_first-line/index.html b/files/ru/web/css/_doublecolon_first-line/index.html
deleted file mode 100644
index 1856b61d5512e8..00000000000000
--- a/files/ru/web/css/_doublecolon_first-line/index.html
+++ /dev/null
@@ -1,81 +0,0 @@
----
-title: '::first-line (:first-line)'
-slug: 'Web/CSS/::first-line'
-tags:
- - CSS
- - Layout
- - Reference
- - Псевдоэлементы
-translation_of: 'Web/CSS/::first-line'
----
-{{CSSRef}}
-
-CSS псевдоэлемент ::first-lineблочного элемента .
-
-/* Стили для первой строки элемента <p> */
-p::first-line {
- color: red;
-}
-
-
-
В CSS3 появилась запись ::first-line (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов . Браузеры также поддерживают запись :first-line, введённую в CSS2.
-
Разрешённые свойства
-
-Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::first-line:
-
-
- Все свойства, связанные с шрифтами: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} и {{Cssxref("font-family")}}
- Все свойства, связанные с фоном: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}} и {{cssxref("background-blend-mode")}}
- Свойство {{cssxref("color")}}
- {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} и {{cssxref("line-height")}}
- {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} и {{cssxref("vertical-align")}}.
-
-
-Синтаксис
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<p>Стили будут применены только к первой строке этого параграфа.
-После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?</p>
-
-<span>Первая строка этого элемента не будет стилизована специальным образом
-потому что это не блочный элемент.</span>
-
-CSS
-
-::first-line {
- color: blue;
- text-transform: uppercase;
-
-
- /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
- /* Многие свойства запрещены в псевдоэлементах ::first-line */
- margin-left: 20px;
- text-indent: 20px;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример', 350, 160)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{cssxref("::first-letter")}}
-
diff --git a/files/ru/web/css/_doublecolon_first-line/index.md b/files/ru/web/css/_doublecolon_first-line/index.md
new file mode 100644
index 00000000000000..8ddb7121f3bfde
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_first-line/index.md
@@ -0,0 +1,79 @@
+---
+title: '::first-line (:first-line)'
+slug: Web/CSS/::first-line
+tags:
+ - CSS
+ - Layout
+ - Reference
+ - Псевдоэлементы
+translation_of: Web/CSS/::first-line
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::first-line`** применяет стили к первой строке [блочного элемента](/ru/docs/Web/CSS/Visual_formatting_model#Block-level_elements_and_block_boxes). Обратите внимание, что длина первой строки зависит от многих факторов, включая ширину элемента, ширину документа и размер шрифта текста.
+
+```css
+/* Стили для первой строки элемента */
+p::first-line {
+ color: red;
+}
+```
+
+> **Примечание:** В CSS3 появилась запись `::first-line` (с двумя двоеточиями) для различения [псевдоклассов](/ru/docs/Web/CSS/Pseudo-classes) и [псевдоэлементов](/ru/docs/Web/CSS/Pseudo-elements). Браузеры также поддерживают запись `:first-line`, введённую в CSS2.
+
+## Разрешённые свойства
+
+Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::first-line`:
+
+- Все свойства, связанные с шрифтами: {{Cssxref("font")}}, {{cssxref("font-kerning")}}, {{Cssxref("font-style")}}, {{Cssxref("font-variant")}}, {{cssxref("font-variant-numeric")}}, {{cssxref("font-variant-position")}}, {{cssxref("font-variant-east-asian")}}, {{cssxref("font-variant-caps")}}, {{cssxref("font-variant-alternates")}}, {{cssxref("font-variant-ligatures")}}, {{cssxref("font-synthesis")}}, {{cssxref("font-feature-settings")}}, {{cssxref("font-language-override")}}, {{Cssxref("font-weight")}}, {{Cssxref("font-size")}}, {{cssxref("font-size-adjust")}}, {{cssxref("font-stretch")}} и {{Cssxref("font-family")}}
+- Все свойства, связанные с фоном: {{Cssxref("background-color")}}, {{cssxref("background-clip")}}, {{Cssxref("background-image")}}, {{cssxref("background-origin")}}, {{Cssxref("background-position")}}, {{Cssxref("background-repeat")}}, {{cssxref("background-size")}}, {{Cssxref("background-attachment")}} и {{cssxref("background-blend-mode")}}
+- Свойство {{cssxref("color")}}
+- {{cssxref("word-spacing")}}, {{cssxref("letter-spacing")}}, {{cssxref("text-decoration")}}, {{cssxref("text-transform")}} и {{cssxref("line-height")}}
+- {{cssxref("text-shadow")}}, {{cssxref("text-decoration")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} и {{cssxref("vertical-align")}}.
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+
Стили будут применены только к первой строке этого параграфа.
+После этого, весь текст будет отображаться как обычно. Увидели, что я имею в виду?
+
+Первая строка этого элемента не будет стилизована специальным образом
+потому что это не блочный элемент.
+```
+
+### CSS
+
+```css
+::first-line {
+ color: blue;
+ text-transform: uppercase;
+
+
+ /* ПРЕДУПРЕЖДЕНИЕ: НЕ ИСПОЛЬЗУЙТЕ ЭТО */
+ /* Многие свойства запрещены в псевдоэлементах ::first-line */
+ margin-left: 20px;
+ text-indent: 20px;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример', 350, 160)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("::first-letter")}}
diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.html b/files/ru/web/css/_doublecolon_grammar-error/index.html
deleted file mode 100644
index 7d014526655842..00000000000000
--- a/files/ru/web/css/_doublecolon_grammar-error/index.html
+++ /dev/null
@@ -1,71 +0,0 @@
----
-title: '::grammar-error'
-slug: 'Web/CSS/::grammar-error'
-tags:
- - CSS
- - Псевдо-элемент
- - Экспериментальные
- - селектор
-translation_of: 'Web/CSS/::grammar-error'
----
-{{CSSRef}}{{SeeCompatTable}}
-
-CSS псевдо-элемент ::grammar-error
-
-Доступные свойства
-
-Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::grammar-error :
-
-
- {{cssxref("color")}}
- {{cssxref("background-color")}}
- {{cssxref("cursor")}}
- {{cssxref("caret-color")}}
- {{cssxref("outline")}} и его полные формы
- {{cssxref("text-decoration")}} и связанные свойства
- {{cssxref("text-emphasis-color")}}
- {{cssxref("text-shadow")}}
-
-
-Синтаксис
-
-::grammar-error
-
-Примеры
-
-Простая проверка грамматики документа
-
-В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.
-
-HTML
-
-<p>My friends is coming to the party tonight.</p>
-
-CSS
-
-::grammar-error {
- text-decoration: underline red;
- color: red;
-}
-
-Результат
-
-{{EmbedLiveSample('Простая_проверка_грамматики_документа', '100%', 60)}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-Смотрите также
-
-
- {{cssxref("::spelling-error")}}
-
diff --git a/files/ru/web/css/_doublecolon_grammar-error/index.md b/files/ru/web/css/_doublecolon_grammar-error/index.md
new file mode 100644
index 00000000000000..702e8f90168d47
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_grammar-error/index.md
@@ -0,0 +1,67 @@
+---
+title: '::grammar-error'
+slug: Web/CSS/::grammar-error
+tags:
+ - CSS
+ - Псевдо-элемент
+ - Экспериментальные
+ - селектор
+translation_of: Web/CSS/::grammar-error
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+[CSS](/ru/docs/Web/CSS) [псевдо-элемент](/en/CSS/Pseudo-elements) **`::grammar-error`** представляет сегмент текста, который {{glossary("user agent")}} пометил как грамматически неверный.
+
+## Доступные свойства
+
+Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::grammar-error` :
+
+- {{cssxref("color")}}
+- {{cssxref("background-color")}}
+- {{cssxref("cursor")}}
+- {{cssxref("caret-color")}}
+- {{cssxref("outline")}} и его полные формы
+- {{cssxref("text-decoration")}} и связанные свойства
+- {{cssxref("text-emphasis-color")}}
+- {{cssxref("text-shadow")}}
+
+## Синтаксис
+
+ ::grammar-error
+
+## Примеры
+
+### Простая проверка грамматики документа
+
+В этом примере браузеры, поддерживающие псевдоэлемент, выделят грамматические ошибки, применив к ним заданные стили.
+
+#### HTML
+
+```html
+My friends is coming to the party tonight.
+```
+
+#### CSS
+
+```css
+::grammar-error {
+ text-decoration: underline red;
+ color: red;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Простая_проверка_грамматики_документа', '100%', 60)}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("::spelling-error")}}
diff --git a/files/ru/web/css/_doublecolon_marker/index.html b/files/ru/web/css/_doublecolon_marker/index.html
deleted file mode 100644
index 913f9f14dbd5ef..00000000000000
--- a/files/ru/web/css/_doublecolon_marker/index.html
+++ /dev/null
@@ -1,93 +0,0 @@
----
-title: '::marker'
-slug: 'Web/CSS/::marker'
-translation_of: 'Web/CSS/::marker'
----
-{{CSSRef}}
-
-Псевдоэлемент ::marker Работает с любым элементом или псевдоэлементом, к которого установлен display: list-item
-
-::marker {
- color: blue;
- font-size: 1.2em;
-}
-
-Разрешённые свойства
-
-Только некоторые CSS-свойства могут быть использованы с ::marker в качестве селектора:
-
-
- Все свойства шрифтов
- {{CSSxRef("white-space")}}
- {{CSSxRef("color")}}
- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} и {{CSSxRef("direction")}}
- Свойство {{CSSxRef("content")}}
- Все animation и transition свойства
-
-
-
-
The specification states that additional CSS properties may be supported in future.
-
Syntax
-
-{{CSSSyntax}}
-
-Examples
-
-HTML
-
-<ul>
- <li>Peaches</li>
- <li>Apples</li>
- <li>Plums</li>
-</ul>
-
-CSS
-
-ul li::marker {
- color: red;
- font-size: 1.5em;
-}
-
-Result
-
-{{EmbedLiveSample('Examples')}}
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}}
- {{Spec2('CSS4 Pseudo-Elements')}}
- No significant change.
-
-
- {{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}}
- {{Spec2('CSS3 Lists')}}
- Initial definition.
-
-
-
-
-Browser compatibility
-
-
-
-See also
-
-
- HTML-элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}
-
diff --git a/files/ru/web/css/_doublecolon_marker/index.md b/files/ru/web/css/_doublecolon_marker/index.md
new file mode 100644
index 00000000000000..b96f85bc093a11
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_marker/index.md
@@ -0,0 +1,72 @@
+---
+title: '::marker'
+slug: Web/CSS/::marker
+translation_of: Web/CSS/::marker
+---
+{{CSSRef}}
+
+Псевдоэлемент **`::marker`** применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен [`display: list-item`](/en-US/docs/Web/CSS/display), например, у такого как {{HTMLElement("li")}} или {{HTMLElement("summary")}}.
+
+```css
+::marker {
+ color: blue;
+ font-size: 1.2em;
+}
+```
+
+## Разрешённые свойства
+
+Только некоторые CSS-свойства могут быть использованы с `::marker` в качестве селектора:
+
+- Все [свойства шрифтов](/ru/docs/Web/CSS/CSS_Fonts)
+- {{CSSxRef("white-space")}}
+- {{CSSxRef("color")}}
+- {{CSSxRef("text-combine-upright")}}, {{CSSxRef("unicode-bidi")}} и {{CSSxRef("direction")}}
+- Свойство {{CSSxRef("content")}}
+- Все [animation](/ru/docs/Web/CSS/CSS_Animations#CSS_Properties) и [transition](/ru/docs/Web/CSS/CSS_Transitions#Properties) свойства
+
+> **Примечание:** The specification states that additional CSS properties may be supported in future.
+
+## Syntax
+
+{{CSSSyntax}}
+
+## Examples
+
+### HTML
+
+```html
+
+ Peaches
+ Apples
+ Plums
+
+```
+
+### CSS
+
+```css
+ul li::marker {
+ color: red;
+ font-size: 1.5em;
+}
+```
+
+### Result
+
+{{EmbedLiveSample('Examples')}}
+
+## Specifications
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------- | -------------------------------------------- | ---------------------- |
+| {{SpecName('CSS4 Pseudo-Elements', '#marker-pseudo', '::marker')}} | {{Spec2('CSS4 Pseudo-Elements')}} | No significant change. |
+| {{SpecName('CSS3 Lists', '#marker-pseudo', '::marker')}} | {{Spec2('CSS3 Lists')}} | Initial definition. |
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- HTML-элементы, у которые есть маркеры списка по умолчанию: {{HTMLElement("ol")}}, {{HTMLElement("li")}}, {{HTMLElement("summary")}}
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.html b/files/ru/web/css/_doublecolon_placeholder/index.html
deleted file mode 100644
index 92ed6bd566b64b..00000000000000
--- a/files/ru/web/css/_doublecolon_placeholder/index.html
+++ /dev/null
@@ -1,136 +0,0 @@
----
-title: '::placeholder'
-slug: 'Web/CSS/::placeholder'
-tags:
- - '::placeholder'
- - CSS
- - Псевдоэлемент
-translation_of: 'Web/CSS/::placeholder'
----
-{{CSSRef}}
-
-CSS псевдоэлемент ::placeholderтекст placeholder в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.
-
-::placeholder {
- color: blue;
- font-size: 1.5em;
-}
-
-В ::placeholder можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.
-
-
-
Note: В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
-
Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Красный текст
-
-HTML
-
-<input placeholder="Введите что-нибудь!">
-
-CSS
-
-input::placeholder {
- color: red;
- font-size: 1.2em;
- font-style: italic;
-}
-
-Результат
-
-{{EmbedLiveSample("Красный_текст", 200, 60)}}
-
-Зелёный текст
-
-HTML
-
-<input placeholder="Введите что-нибудь...">
-
-CSS
-
-input::placeholder {
- color: green;
-}
-
-
-Результат
-
-{{EmbedLiveSample("Зелёный_текст", 200, 60)}}
-
-Проблемы доступности
-
-Цветовой контраст
-
-Контрастность
-
-Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.
-
-Важно обеспечить достаточный цветовой контраст между placeholder и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
-
-Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG) , требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
-
-
-
-Использование
-
-Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в {{htmlelement("input")}} элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.
-
-Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать aria-describedby
-
-В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют aria-describedby для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.
-
-<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">
-
-
-
-
-Режим высокой контрастности Windows
-
-Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows . Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.
-
-
-
-Метки
-
-Placeholder не является заменой элемента {{htmlelement("label")}}. Без метки, которая программно связывается с формой с помощью {{htmlattrxref("for", "label")}} и {{htmlattrxref("id")}} атрибутов, такие программы, как скринридеры не смогут анализировать элементы {{htmlelement("input")}}.
-
-
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-
-
-Смотрите также
-
-
- Псевдокласс {{cssxref(":placeholder-shown")}}, который позволяет применять стили к элементу с активным
- Связанные HTML-элементы: {{HTMLElement("input")}}, {{HTMLElement("textarea")}}
- HTML-формы
diff --git a/files/ru/web/css/_doublecolon_placeholder/index.md b/files/ru/web/css/_doublecolon_placeholder/index.md
new file mode 100644
index 00000000000000..eb966223b1e51e
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_placeholder/index.md
@@ -0,0 +1,130 @@
+---
+title: '::placeholder'
+slug: Web/CSS/::placeholder
+tags:
+ - '::placeholder'
+ - CSS
+ - Псевдоэлемент
+translation_of: Web/CSS/::placeholder
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::placeholder`** представляет собой [текст placeholder](/ru/docs/Web/HTML/Forms_in_HTML#The_placeholder_attribute) в {{HTMLElement("input")}} или {{HTMLElement("textarea")}} элементах.
+
+```css
+::placeholder {
+ color: blue;
+ font-size: 1.5em;
+}
+```
+
+В `::placeholder` можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе {{cssxref("::first-line")}}.
+
+> **Примечание:** В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Красный текст
+
+#### HTML
+
+```html
+Ваш email адрес
+Пример: jane@sample.com
+{{CSSRef}}{{SeeCompatTable}}
-
-Псевдоэлемент ::selection
-
-::selection {
- background: cyan;
-}
-
-Разрешённые свойства
-
-Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом ::selection :
-
-
- {{cssxref("color")}}
- {{cssxref("background-color")}}
- {{cssxref("cursor")}}
- {{cssxref("caret-color")}}
- {{cssxref("outline")}} и его длинные записи
- {{cssxref("text-decoration")}} и связанные свойства
- {{cssxref("text-emphasis-color")}}
- {{cssxref("text-shadow")}}
-
-
-
-
Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.
-
Синтаксис
-
-/* синтаксис Firefox */
-::-moz-selection
-
-{{csssyntax}}
-
-
-Пример
-
-HTML
-
-<div>Этот текст будет стилизован особым образом при выделении.</div>
-<p>Также попробуйте выделить текст в этом параграфе.</p>
-
-CSS
-
-/* Сделаем выделенный текст золотым с красным фоном */
-::-moz-selection {
- color: gold;
- background: red;
-}
-
-::selection {
- color: gold;
- background: red;
-}
-
-/* Сделаем выделенный в параграфе текст белым на синем фоне */
-p::-moz-selection {
- color: white;
- background: blue;
-}
-
-p::selection {
- color: white;
- background: blue;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример')}}
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}}
- {{Spec2('CSS4 Pseudo-Elements')}}
- Изначальное определение.
-
-
-
-
-
-
Примечание: Хотя псевдоэлемент ::selection присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута (основываясь на обсуждении в списке рассылки W3C Style) . Этот псевдоэлемент был возвращён в Pseudo-Elements Level 4 .
-
Поддержка браузерами
-
-
diff --git a/files/ru/web/css/_doublecolon_selection/index.md b/files/ru/web/css/_doublecolon_selection/index.md
new file mode 100644
index 00000000000000..8b083c521ac979
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_selection/index.md
@@ -0,0 +1,93 @@
+---
+title: '::selection'
+slug: Web/CSS/::selection
+tags:
+ - CSS
+ - Experimental
+ - Layoout
+ - Reference
+ - Псевдоэлементы
+translation_of: Web/CSS/::selection
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+[Псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) **`::selection` **позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).
+
+```css
+::selection {
+ background: cyan;
+}
+```
+
+## Разрешённые свойства
+
+Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::selection` :
+
+- {{cssxref("color")}}
+- {{cssxref("background-color")}}
+- {{cssxref("cursor")}}
+- {{cssxref("caret-color")}}
+- {{cssxref("outline")}} и его длинные записи
+- {{cssxref("text-decoration")}} и связанные свойства
+- {{cssxref("text-emphasis-color")}}
+- {{cssxref("text-shadow")}}
+
+> **Предупреждение:** Заметим, что, в частности, свойство {{cssxref("background-image")}} игнорируется.
+
+## Синтаксис
+
+ /* синтаксис Firefox */
+ ::-moz-selection
+
+ {{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+Этот текст будет стилизован особым образом при выделении.
+Также попробуйте выделить текст в этом параграфе.
+```
+
+### CSS
+
+```css
+/* Сделаем выделенный текст золотым с красным фоном */
+::-moz-selection {
+ color: gold;
+ background: red;
+}
+
+::selection {
+ color: gold;
+ background: red;
+}
+
+/* Сделаем выделенный в параграфе текст белым на синем фоне */
+p::-moz-selection {
+ color: white;
+ background: blue;
+}
+
+p::selection {
+ color: white;
+ background: blue;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример')}}
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| -------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------------------ |
+| {{SpecName('CSS4 Pseudo-Elements', '#selectordef-selection', '::selection')}} | {{Spec2('CSS4 Pseudo-Elements')}} | Изначальное определение. |
+
+> **Примечание:** Хотя псевдоэлемент `::selection` присутствовал в черновиках стандарта CSS Selectors Level 3, он был убран в течение фазы Candidate Recommendation, так как его поведение было недостаточно проработано (особенно с вложенным элементами) и согласованность не была достигнута [(основываясь на обсуждении в списке рассылки W3C Style)](http://lists.w3.org/Archives/Public/www-style/2008Oct/0268.html). Этот псевдоэлемент был возвращён в [Pseudo-Elements Level 4](http://dev.w3.org/csswg/css-pseudo-4/).
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/_doublecolon_slotted/index.html b/files/ru/web/css/_doublecolon_slotted/index.html
deleted file mode 100644
index 7d10bd54f3d016..00000000000000
--- a/files/ru/web/css/_doublecolon_slotted/index.html
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: '::slotted()'
-slug: 'Web/CSS/::slotted'
-translation_of: 'Web/CSS/::slotted'
----
-{{ CSSRef }}
-
-CSS псевдо-элемент ::slotted()Using templates and slots ).
-
-Это работает только при использовании внутри CSS, помещённого в shadow DOM . Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.
-
-/* Выбирает любой элемент, помещённый в слот */
-::slotted(*) {
- font-weight: bold;
-}
-
-/* Выбирает только <span>, помещённый в слот */
-::slotted(span) {
- font-weight: bold;
-}
-
-
-Синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Следующие фрагменты взяты из нашей демо slotted-pseudo-element (see it live also ).
-
-В этом демо мы использовали простой шаблон с тремя слотами:
-
-<template id="person-template">
- <div>
- <h2>Personal ID Card</h2>
- <slot name="person-name">NAME MISSING</slot>
- <ul>
- <li><slot name="person-age">AGE MISSING</slot></li>
- <li><slot name="person-occupation">OCCUPATION MISSING</slot></li>
- </ul>
- </div>
-</template>
-
-Пользовательский элемент — <person-details> — определяется следующим образом:
-
-customElements.define('person-details',
- class extends HTMLElement {
- constructor() {
- super();
- let template = document.getElementById('person-template');
- let templateContent = template.content;
-
- const shadowRoot = this.attachShadow({mode: 'open'});
-
- let style = document.createElement('style');
- style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
- 'h2 { margin: 0 0 10px; }' +
- 'ul { margin: 0; }' +
- 'p { margin: 10px 0; }' +
- '::slotted(*) { color: gray; font-family: sans-serif; } ';
-
- shadowRoot.appendChild(style);
- shadowRoot.appendChild(templateContent.cloneNode(true));
- }
-})
-
-Вы увидите, что при заполнении элемента style содержимым мы выбираем все slotted-элементы (::slotted(*)) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.
-
-Элемент выглядит следующим образом при вставке на страницу:
-
-<person-details>
- <p slot="person-name">Dr. Shazaam</p>
- <span slot="person-age">Immortal</span>
- <span slot="person-occupation">Superhero</span>
-</person-details>
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/_doublecolon_slotted/index.md b/files/ru/web/css/_doublecolon_slotted/index.md
new file mode 100644
index 00000000000000..fbc7aa22845149
--- /dev/null
+++ b/files/ru/web/css/_doublecolon_slotted/index.md
@@ -0,0 +1,94 @@
+---
+title: '::slotted()'
+slug: Web/CSS/::slotted
+translation_of: Web/CSS/::slotted
+---
+{{ CSSRef }}
+
+[CSS](/ru/docs/Web/CSS) [псевдо-элемент](/ru/docs/Web/CSS/Pseudo-elements) **`::slotted()`** представляет собой любой элемент, помещённый в слот внутри HTML-шаблона (дополнительная информация в [Using templates and slots](/ru/docs/Web/Web_Components/Using_templates_and_slots)).
+
+Это работает только при использовании внутри CSS, помещённого в [shadow DOM](/ru/docs/Web/Web_Components/Using_shadow_DOM). Обратите также внимание, что этот селектор не будет выбирать текстовый узел, помещённый в слот; он нацелен только на фактические элементы.
+
+```css
+/* Выбирает любой элемент, помещённый в слот */
+::slotted(*) {
+ font-weight: bold;
+}
+
+/* Выбирает только , помещённый в слот */
+::slotted(span) {
+ font-weight: bold;
+}
+```
+
+## Синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Следующие фрагменты взяты из нашей демо [slotted-pseudo-element](https://github.com/mdn/web-components-examples/tree/master/slotted-pseudo-element) ([see it live also](https://mdn.github.io/web-components-examples/slotted-pseudo-element/)).
+
+В этом демо мы использовали простой шаблон с тремя слотами:
+
+```html
+
+
+
Personal ID Card
+
NAME MISSING
+
+ AGE MISSING OCCUPATION MISSING
+
+```
+
+Пользовательский элемент — `` — определяется следующим образом:
+
+```js
+customElements.define('person-details',
+ class extends HTMLElement {
+ constructor() {
+ super();
+ let template = document.getElementById('person-template');
+ let templateContent = template.content;
+
+ const shadowRoot = this.attachShadow({mode: 'open'});
+
+ let style = document.createElement('style');
+ style.textContent = 'div { padding: 10px; border: 1px solid gray; width: 200px; margin: 10px; }' +
+ 'h2 { margin: 0 0 10px; }' +
+ 'ul { margin: 0; }' +
+ 'p { margin: 10px 0; }' +
+ '::slotted(*) { color: gray; font-family: sans-serif; } ';
+
+ shadowRoot.appendChild(style);
+ shadowRoot.appendChild(templateContent.cloneNode(true));
+ }
+})
+```
+
+Вы увидите, что при заполнении элемента `style` содержимым мы выбираем все slotted-элементы (`::slotted(*)`) и задаём им другой цвет и шрифт. Это позволяет им лучше выделяться рядом с теми слотами, которые ещё не были успешно заполнены.
+
+Элемент выглядит следующим образом при вставке на страницу:
+
+```html
+
+ Dr. Shazaam
+ Immortal
+ Superhero
+
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Web components](/ru/docs/Web/Web_Components)
diff --git a/files/ru/web/css/actual_value/index.html b/files/ru/web/css/actual_value/index.html
deleted file mode 100644
index ddea4fc2b5b7d7..00000000000000
--- a/files/ru/web/css/actual_value/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Действительное значение
-slug: Web/CSS/actual_value
-tags:
- - CSS
- - Guide
- - Web
-translation_of: Web/CSS/actual_value
-original_slug: Web/CSS/Действительное_значение
----
-{{CSSRef}}
-
-Описание
-
-Действительное значение CSS-свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}}
- {{Spec2('CSS2.1')}}
- Изначальное определение
-
-
-
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/actual_value/index.md b/files/ru/web/css/actual_value/index.md
new file mode 100644
index 00000000000000..92497f7ae1254a
--- /dev/null
+++ b/files/ru/web/css/actual_value/index.md
@@ -0,0 +1,26 @@
+---
+title: Действительное значение
+slug: Web/CSS/actual_value
+tags:
+ - CSS
+ - Guide
+ - Web
+translation_of: Web/CSS/actual_value
+original_slug: Web/CSS/Действительное_значение
+---
+{{CSSRef}}
+
+## Описание
+
+**Действительное значение** CSS-свойства - используемое после всех приближений значение. Например, браузер может отображать рамки только с целым значением пикселей и будет принудительно округлять ширину.
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| ---------------------------------------------------------------------------------------- | ------------------------ | ----------------------- |
+| {{SpecName('CSS2.1', 'cascade.html#actual-value', 'actual value')}} | {{Spec2('CSS2.1')}} | Изначальное определение |
+
+## Смотрите также
+
+- [Руководство по CSS](/ru/docs/Web/CSS/Reference)
+- {{CSS_key_concepts}}
diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.html b/files/ru/web/css/adjacent_sibling_combinator/index.html
deleted file mode 100644
index 2f8390de348613..00000000000000
--- a/files/ru/web/css/adjacent_sibling_combinator/index.html
+++ /dev/null
@@ -1,57 +0,0 @@
----
-title: Смежные селекторы
-slug: Web/CSS/Adjacent_sibling_combinator
-translation_of: Web/CSS/Adjacent_sibling_combinator
----
-{{CSSRef("Selectors")}}
-
-Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.
-
-Синтаксис
-
-former_element + target_element { style properties }
-
-
-Пример
-
-
-
li:first-of-type + li {
- color: red;
-}
-
-
-
<ul>
- <li>Один</li>
- <li>Два</li>
- <li>Три</li>
-</ul>
-
{{EmbedLiveSample('Example_1', 200, 100)}}
-
-Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:
-
-img + span.caption {
- font-style: italic;
-}
-
-
-сработает только на тех тегах span, для которых задан класс caption:
-
-<img src="photo1.jpg"><span class="caption">Первая фотка</span>
-<img src="photo2.jpg"><span class="caption">Вторая</span>
-
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/adjacent_sibling_combinator/index.md b/files/ru/web/css/adjacent_sibling_combinator/index.md
new file mode 100644
index 00000000000000..ddf4036bb230a8
--- /dev/null
+++ b/files/ru/web/css/adjacent_sibling_combinator/index.md
@@ -0,0 +1,57 @@
+---
+title: Смежные селекторы
+slug: Web/CSS/Adjacent_sibling_combinator
+translation_of: Web/CSS/Adjacent_sibling_combinator
+---
+{{CSSRef("Selectors")}}
+
+Указывает на смежный или следующий селектор. Обеспечивает выбор только элемента расположенного непосредственно за определённым в первой части элементом.
+
+## Синтаксис
+
+ former_element + target_element { style properties }
+
+## Пример
+
+```css
+li:first-of-type + li {
+ color: red;
+}
+```
+
+```html
+
+```
+
+{{EmbedLiveSample('Example_1', 200, 100)}}
+
+Так же может использоваться для задания стиля определённого класса "caption span" следующих {{HTMLElement("img")}} вложенных элементов:
+
+```css
+img + span.caption {
+ font-style: italic;
+}
+```
+
+сработает только на тех тегах span, для которых задан класс caption:
+
+```html
+Первая фотка
+Вторая
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Селекторы следующего элемента](/ru/docs/Web/CSS/General_sibling_selectors)
diff --git a/files/ru/web/css/align-content/index.html b/files/ru/web/css/align-content/index.html
deleted file mode 100644
index a88f7dbfeb717c..00000000000000
--- a/files/ru/web/css/align-content/index.html
+++ /dev/null
@@ -1,261 +0,0 @@
----
-title: align-content
-slug: Web/CSS/align-content
-translation_of: Web/CSS/align-content
----
-{{CSSRef}}
-
-Свойство {{cssxRef('', 'CSS')}} align-content
-
-The interactive example below use Grid Layout to demonstrate some of the values of this property.
-
-{{EmbedInteractiveExample("pages/css/align-content.html")}}
-
-Это свойство не влияет на однострочные flex-контейнеры (т.е. с flex-wrap: nowrap)
-
-Синтаксис
-
-/* Основное позиционное выравнивание */
-/* align-content не принимает значения left и right */
-align-content: center; /* Расположить элементы вокруг центра */
-align-content: start; /* Расположить элементы в начале */
-align-content: end; /* Расположить элементы в конце */
-align-content: flex-start; /* Расположить элементы flex в начале */
-align-content: flex-end; /* Расположить элементы flex в конце */
-
-/* Нормальное выравнивание */
-align-content: normal;
-
-/* Выравнивание по базовой линии */
-align-content: baseline;
-align-content: first baseline;
-align-content: last baseline;
-
-/* Распределённое выравнивание */
-align-content: space-between; /* Распределить элементы равномерно
- Первый элемент находится на одном уровне с началом,
- последней - совпадает с концом */
-align-content: space-around; /* Распределить элементы равномерно
- Элементы имеют половинное пространство
- на каждом конце */
-align-content: space-evenly; /* Распределить элементы равномерно
- Элементы имеют одинаковое пространство вокруг них */
-align-content: stretch; /* Распределить элементы равномерно
- Растянуть 'auto'-размерные элементы, чтобы заполнить
- контейнер */
-
-/* Выравнивание переполнения (overflow) */
-align-content: safe center;
-align-content: unsafe center;
-
-/* Глобальные значения */
-align-content: inherit;
-align-content: initial;
-align-content: unset;
-
-
-Значения
-
-
- startЭлементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.
- endЭлементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.
- flex-startЭлементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.start.
- flex-endЭлементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.end.
- centerЭлементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.
- normalЭлементы расположены в их дефолтной позиции как если бы align-content не было определено.
- baselinelast baseline
- Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.first baseline равно start, для last baseline - end.
- space-betweenЭлементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
- space-aroundЭлементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
- space-evenlyЭлементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.
- stretchЕсли объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого auto-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.
- safeИспользуется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был start.
- unsafeИспользуется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-CSS
-
-#container {
- height:200px;
- width: 240px;
- align-content: center; /* Can be changed in the live sample */
- background-color: #8c8c8c;
-}
-
-.flex {
- display: flex;
- flex-wrap: wrap;
-}
-
-.grid {
- display: grid;
- grid-template-columns: repeat(auto-fill, 50px);
-}
-
-div > div {
- box-sizing: border-box;
- border: 2px solid #8c8c8c;
- width: 50px;
- display: flex;
- align-items: center;
- justify-content: center;
-}
-
-#item1 {
- background-color: #8cffa0;
- min-height: 30px;
-}
-
-#item2 {
- background-color: #a0c8ff;
- min-height: 50px;
-}
-
-#item3 {
- background-color: #ffa08c;
- min-height: 40px;
-}
-
-#item4 {
- background-color: #ffff8c;
- min-height: 60px;
-}
-
-#item5 {
- background-color: #ff8cff;
- min-height: 70px;
-}
-
-#item6 {
- background-color: #8cffff;
- min-height: 50px;
- font-size: 30px;
-}
-
-select {
- font-size: 16px;
-}
-
-.row {
- margin-top: 10px;
-}
-
-
-HTML
-
-<div id="container" class="flex">
- <div id="item1">1</div>
- <div id="item2">2</div>
- <div id="item3">3</div>
- <div id="item4">4</div>
- <div id="item5">5</div>
- <div id="item6">6</div>
-</div>
-
-<div class="row">
- <label for="display">display: </label>
- <select id="display">
- <option value="flex">flex</option>
- <option value="grid">grid</option>
- </select>
-</div>
-
-<div class="row">
- <label for="values">align-content: </label>
- <select id="values">
- <option value="normal">normal</option>
- <option value="stretch">stretch</option>
- <option value="flex-start">flex-start</option>
- <option value="flex-end">flex-end</option>
- <option value="center" selected>center</option>
- <option value="space-between">space-between</option>
- <option value="space-around">space-around</option>
- <option value="space-evenly">space-evenly</option>
-
- <option value="start">start</option>
- <option value="end">end</option>
- <option value="left">left</option>
- <option value="right">right</option>
-
- <option value="baseline">baseline</option>
- <option value="first baseline">first baseline</option>
- <option value="last baseline">last baseline</option>
-
- <option value="safe center">safe center</option>
- <option value="unsafe center">unsafe center</option>
- <option value="safe right">safe right</option>
- <option value="unsafe right">unsafe right</option>
- <option value="safe end">safe end</option>
- <option value="unsafe end">unsafe end</option>
- <option value="safe flex-end">safe flex-end</option>
- <option value="unsafe flex-end">unsafe flex-end</option>
- </select>
-</div>
-
-
-
-
JavaScript
-
-
var values = document.getElementById('values');
-var display = document.getElementById('display');
-var container = document.getElementById('container');
-
-values.addEventListener('change', function (evt) {
- container.style.alignContent = evt.target.value;
-});
-
-display.addEventListener('change', function (evt) {
- container.className = evt.target.value;
-});
-
-
Результат
-
-{{EmbedLiveSample('Пример', 260, 290)}}
-
-Спецификации
-
-{{Specifications("css.properties.align-content.grid_context")}}
-
-{{Specifications("css.properties.align-content.grid_context")}}
-
-Совместимость с браузерами
-
-Support in Flex layout
-
-{{Compat}}
-
-Support in Grid layout
-
-{{Compat("css.properties.align-content.grid_context")}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/align-content/index.md b/files/ru/web/css/align-content/index.md
new file mode 100644
index 00000000000000..c7f5efbc8c6958
--- /dev/null
+++ b/files/ru/web/css/align-content/index.md
@@ -0,0 +1,254 @@
+---
+title: align-content
+slug: Web/CSS/align-content
+translation_of: Web/CSS/align-content
+---
+{{CSSRef}}
+
+Свойство {{cssxRef('', 'CSS')}} **`align-content`** устанавливает распределение пространства между и вокруг элементами контента вдоль поперечной оси {{cssxRef('CSS_Flexible_Box_Layout', 'flexbox')}} контейнера или вдоль блочной оси {{cssxRef('CSS_Grid_Layout', 'grid')}} контейнера.
+
+The interactive example below use Grid Layout to demonstrate some of the values of this property.
+
+{{EmbedInteractiveExample("pages/css/align-content.html")}}
+
+Это свойство не влияет на однострочные flex-контейнеры (т.е. с `flex-wrap: nowrap`)
+
+## Синтаксис
+
+```css
+/* Основное позиционное выравнивание */
+/* align-content не принимает значения left и right */
+align-content: center; /* Расположить элементы вокруг центра */
+align-content: start; /* Расположить элементы в начале */
+align-content: end; /* Расположить элементы в конце */
+align-content: flex-start; /* Расположить элементы flex в начале */
+align-content: flex-end; /* Расположить элементы flex в конце */
+
+/* Нормальное выравнивание */
+align-content: normal;
+
+/* Выравнивание по базовой линии */
+align-content: baseline;
+align-content: first baseline;
+align-content: last baseline;
+
+/* Распределённое выравнивание */
+align-content: space-between; /* Распределить элементы равномерно
+ Первый элемент находится на одном уровне с началом,
+ последней - совпадает с концом */
+align-content: space-around; /* Распределить элементы равномерно
+ Элементы имеют половинное пространство
+ на каждом конце */
+align-content: space-evenly; /* Распределить элементы равномерно
+ Элементы имеют одинаковое пространство вокруг них */
+align-content: stretch; /* Распределить элементы равномерно
+ Растянуть 'auto'-размерные элементы, чтобы заполнить
+ контейнер */
+
+/* Выравнивание переполнения (overflow) */
+align-content: safe center;
+align-content: unsafe center;
+
+/* Глобальные значения */
+align-content: inherit;
+align-content: initial;
+align-content: unset;
+```
+
+### Значения
+
+- `start`
+ - : Элементы расположены вплотную друг к другу, прижавшись к началу контейнера выравнивания по поперечной оси.
+- `end`
+ - : Элементы расположены вплотную друг к другу, прижавшись к концу контейнера выравнивания по поперечной оси.
+- `flex-start`
+ - : Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны начала (cross-start) контейнера flex.
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как `start`.
+- `flex-end`
+ - : Элементы расположены вплотную друг к другу, прижавшись к краю контейнера выравнивания в зависимости от поперечной стороны конца (cross-end) контейнера flex.
+ Это относится только к элементам макета flex. Для элементов, которые не являются потомками flex контейнера, это значение трактуется как `end`.
+- `center`
+ - : Элементы расположены вплотную друг к другу в центре контейнера выравнивания по поперечной оси.
+- `normal`
+ - : Элементы расположены в их дефолтной позиции как если бы `align-content` не было определено.
+- `baseline first baseline`
+ `last baseline`
+ - : Определяет участие в выравнивании первой или последней базовой линии: выравнивает базовую линию выравнивания первого или последнего базового набора блока с соответствующей базовой линией в общем первом или последнем базовом наборе всех блоков в его группе совместного использования базовой линии.
+ Резервное выравнивание для `first baseline` равно `start`, для `last baseline` - `end`.
+- `space-between`
+ - : Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов одинаков. Первый элемент находится на одном уровне с начальной кромкой контейнера выравнивания на поперечной оси, а последний элемент находится на одном уровне с конечной кромкой контейнера выравнивания на поперечной оси.
+- `space-around`
+ - : Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних предметов одинаков. Пустое пространство до первого и после последнего элемента равно половине пространства между каждой парой смежных элементов.
+- `space-evenly`
+ - : Элементы равномерно распределены внутри контейнера выравнивания вдоль поперечной оси. Интервал между каждой парой соседних элементов, начальным краем и первым элементом, а также конечным краем и последним элементом абсолютно одинаков.
+- `stretch`
+ - : Если объединённый размер элементов вдоль поперечной оси меньше размера контейнера выравнивания, размер любого `auto`-размерного элемента увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые {{cssxRef('max-height')}}/{{cssxRef('max-width')}} (или эквивалентной функциональности), так что объединённый размер точно заполняет контейнер выравнивания вдоль поперечной оси.
+- `safe`
+ - : Используется вместе с ключевым словом выравнивания. Если выбранное ключевое слово означает, что элемент переполняет контейнер выравнивания, что приводит к потере данных, вместо этого элемент выравнивается, как если бы режим выравнивания был `start`.
+- `unsafe`
+ - : Используется вместе с ключевым словом выравнивания. Независимо от относительных размеров элемента и контейнера выравнивания и от того, может ли произойти переполнение, которое приводит к потере данных, данное значение выравнивания учитывается.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### CSS
+
+```css
+#container {
+ height:200px;
+ width: 240px;
+ align-content: center; /* Can be changed in the live sample */
+ background-color: #8c8c8c;
+}
+
+.flex {
+ display: flex;
+ flex-wrap: wrap;
+}
+
+.grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, 50px);
+}
+
+div > div {
+ box-sizing: border-box;
+ border: 2px solid #8c8c8c;
+ width: 50px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+#item1 {
+ background-color: #8cffa0;
+ min-height: 30px;
+}
+
+#item2 {
+ background-color: #a0c8ff;
+ min-height: 50px;
+}
+
+#item3 {
+ background-color: #ffa08c;
+ min-height: 40px;
+}
+
+#item4 {
+ background-color: #ffff8c;
+ min-height: 60px;
+}
+
+#item5 {
+ background-color: #ff8cff;
+ min-height: 70px;
+}
+
+#item6 {
+ background-color: #8cffff;
+ min-height: 50px;
+ font-size: 30px;
+}
+
+select {
+ font-size: 16px;
+}
+
+.row {
+ margin-top: 10px;
+}
+```
+
+### HTML
+
+```html
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+ display:
+
+ flex
+ grid
+
+
+
+
+ align-content:
+
+ normal
+ stretch
+ flex-start
+ flex-end
+ center
+ space-between
+ space-around
+ space-evenly
+
+ start
+ end
+ left
+ right
+
+ baseline
+ first baseline
+ last baseline
+
+ safe center
+ unsafe center
+ safe right
+ unsafe right
+ safe end
+ unsafe end
+ safe flex-end
+ unsafe flex-end
+
+
+```
+
+```js hidden
+var values = document.getElementById('values');
+var display = document.getElementById('display');
+var container = document.getElementById('container');
+
+values.addEventListener('change', function (evt) {
+ container.style.alignContent = evt.target.value;
+});
+
+display.addEventListener('change', function (evt) {
+ container.className = evt.target.value;
+});
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример', 260, 290)}}
+
+## Спецификации
+
+{{Specifications("css.properties.align-content.grid_context")}}
+{{Specifications("css.properties.align-content.grid_context")}}
+
+## Совместимость с браузерами
+
+### Support in Flex layout
+
+{{Compat}}
+
+### Support in Grid layout
+
+{{Compat("css.properties.align-content.grid_context")}}
+
+## Смотрите также
+
+- [Использование гибких блоков CSS](../../CSS/Using_CSS_flexible_boxes "CSS/Using_CSS_flexible_boxes")
diff --git a/files/ru/web/css/align-items/index.html b/files/ru/web/css/align-items/index.html
deleted file mode 100644
index 640131c793325b..00000000000000
--- a/files/ru/web/css/align-items/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: align-items
-slug: Web/CSS/align-items
-translation_of: Web/CSS/align-items
----
-{{CSSRef}}
-
-Описание
-
-CSS свойство align-itemsjustify-content
-
-{{cssinfo}}
-
-Подробнее и больше информации читайте в Использование гибких блоков CSS .
-
-Синтаксис
-
-/* Align to cross-start */
-align-items: flex-start;
-
-/* Align to cross-end */
-align-items: flex-end;
-
-/* Центрировать элементы в поперечной оси */
-align-items: center;
-
-/* Выровняйте базовые линии предметов */
-align-items: baseline;
-
-/* Растянуть предметы, чтобы соответствовать */
-align-items: stretch;
-
-/* Глобальные значения */
-align-items: inherit;
-align-items: initial;
-align-items: unset;
-
-
-Значения
-
-
- normalЭффект этого ключевого слова зависит от режима макета, в котором мы находимся::
-
- В абсолютно позиционированных макетах ключевое слово ведёт себя как start в заменённых абсолютно позиционированных блоках, и как stretch во всех других абсолютно позиционированных блоках.
- В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как stretch.
- Для гибких элементов ключевое слово ведёт себя как stretch.
- Для элементов сетки это ключевое слово ведёт к поведению, аналогичному stretch, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как start.
- Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
-
-
- flex-startКрай поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.
- flex-endThe cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
- centerВнешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.
- baselineAll flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
- stretchЭлементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Спецификации
-
-{{Specifications("css.properties.align-items.grid_context")}}
-
-Совместимость с браузерами
-
-Support in Flex layout
-
-{{Compat}}
-
-Support in Grid layout
-
-{{Compat("css.properties.align-items.grid_context")}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/align-items/index.md b/files/ru/web/css/align-items/index.md
new file mode 100644
index 00000000000000..1607684cf562ba
--- /dev/null
+++ b/files/ru/web/css/align-items/index.md
@@ -0,0 +1,79 @@
+---
+title: align-items
+slug: Web/CSS/align-items
+translation_of: Web/CSS/align-items
+---
+{{CSSRef}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") свойство **`align-items`** выравнивает flex-элементы текущей flex-линии таким же образом, как и [`justify-content`](/en/CSS/justify-content "en/CSS/justify-content"), но в перпендикулярном направлении.
+
+{{cssinfo}}
+
+Подробнее и больше информации читайте в [Использование гибких блоков CSS](https://developer.mozilla.org/en/CSS/Using_CSS_flexible_boxes "/en/CSS/Using_CSS_flexible_boxes").
+
+## Синтаксис
+
+```css
+/* Align to cross-start */
+align-items: flex-start;
+
+/* Align to cross-end */
+align-items: flex-end;
+
+/* Центрировать элементы в поперечной оси */
+align-items: center;
+
+/* Выровняйте базовые линии предметов */
+align-items: baseline;
+
+/* Растянуть предметы, чтобы соответствовать */
+align-items: stretch;
+
+/* Глобальные значения */
+align-items: inherit;
+align-items: initial;
+align-items: unset;
+```
+
+### Значения
+
+- `normal`
+ - : Эффект этого ключевого слова зависит от режима макета, в котором мы находимся::\* В абсолютно позиционированных макетах ключевое слово ведёт себя как `start` в _заменённых_ абсолютно позиционированных блоках, и как `stretch` во _всех других_ абсолютно позиционированных блоках.
+ - В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как `stretch`.
+ - Для гибких элементов ключевое слово ведёт себя как `stretch`.
+ - Для элементов сетки это ключевое слово ведёт к поведению, аналогичному `stretch`, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как `start`.
+ - Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.
+- `flex-start`
+ - : Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.
+- `flex-end`
+ - : The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
+- `center`
+ - : Внешний отступ полей гибкого элемента центрируется в пределах линии на поперечной оси. Если поперечный размер элемента больше, чем у гибкого контейнера, он будет одинаково переполнен в обоих направлениях.
+- `baseline`
+ - : All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.
+- `stretch`
+ - : Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Спецификации
+
+{{Specifications("css.properties.align-items.grid_context")}}
+
+## Совместимость с браузерами
+
+### Support in Flex layout
+
+{{Compat}}
+
+### Support in Grid layout
+
+{{Compat("css.properties.align-items.grid_context")}}
+
+## Смотрите также
+
+- [Использование гибких блоков CSS](/ru/docs/CSS/Using_CSS_flexible_boxes)
diff --git a/files/ru/web/css/align-self/index.html b/files/ru/web/css/align-self/index.html
deleted file mode 100644
index f7e27a3ba63d87..00000000000000
--- a/files/ru/web/css/align-self/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: align-self
-slug: Web/CSS/align-self
-tags:
- - CSS
- - flexbox
- - Свойства
-translation_of: Web/CSS/align-self
----
-{{CSSRef}}
-
-Описание
-
-Свойство CSS align-selfalign-itemsmargin в поперечной оси выставлен в auto, то align-self игнорируется.
-
-{{cssinfo}}
-
-Данное свойство не применяется к block-level boxes и к ячейкам таблицы
-
-Подробнее и больше информации читайте в Using CSS flexible boxes .
-
-Синтаксис
-
-
-align-self : auto;
-align-self : normal;
-
-
-
-align-self : center;
-align-self : start;
-align-self : end;
-align-self : self-start;
-align-self : self-end;
-align-self : flex-start;
-align-self : flex-end;
-
-
-align-self : baseline;
-align-self : first baseline;
-align-self : last baseline;
-align-self : stretch;
-
-
-align-self : safe center;
-align-self : unsafe center;
-
-
-align-self : inherit;
-align-self : initial;
-align-self : unset; Значения
-
-
- autoComputes to the parent's {{cssxref("align-items")}} value.
- normalThe effect of this keyword is dependent of the layout mode we are in:
-
- In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
- In static position of absolutely-positioned layouts, the keyword behaves as stretch.
- For flex items, the keyword behaves as stretch.
- For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
- The property doesn't apply to block-level boxes, and to table cells.
-
-
- self-startAligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.
- self-endAligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.
- flex-startThe cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
- flex-endThe cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
- centerThe flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
- baselinelast baselineSpecifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.first baseline is start, the one for last baseline is end.
- stretchIf the combined size of the items along the cross axis is less than the size of the alignment container and the item is auto-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all auto-sized items exactly fills the alignment container along the cross axis.
- safeIf the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
- unsafeRegardless of the relative sizes of the item and alignment container, the given alignment value is honored.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Спецификации
-
-{{Specifications("css.properties.align-self.grid_context")}}
-
-Совместимость с браузерами
-
-
-
-Support in Flex layout
-
-{{Compat}}
-
-Support in Grid layout
-
-{{Compat("css.properties.align-self.grid_context")}}
-
-{{CSSRef}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/align-self/index.md b/files/ru/web/css/align-self/index.md
new file mode 100644
index 00000000000000..278dcec63f457e
--- /dev/null
+++ b/files/ru/web/css/align-self/index.md
@@ -0,0 +1,113 @@
+---
+title: align-self
+slug: Web/CSS/align-self
+tags:
+ - CSS
+ - flexbox
+ - Свойства
+translation_of: Web/CSS/align-self
+---
+{{CSSRef}}
+
+## Описание
+
+Свойство [CSS](/ru/docs/CSS "CSS") **`align-self`** выравнивает flex-элементы по текущей flex-линии, переопределяя значение свойства [`align-items`](/en/CSS/align-items "en/CSS/flex-align"). Если у какого-либо flex-элемента **margin** в поперечной оси выставлен в `auto`, то `align-self` игнорируется.
+
+{{cssinfo}}
+
+Данное свойство не применяется к block-level boxes и к ячейкам таблицы
+
+Подробнее и больше информации читайте в [Using CSS flexible boxes](/en/CSS/Using_CSS_flexible_boxes).
+
+## Синтаксис
+
+```css
+/* Keyword values */
+align-self: auto;
+align-self: normal;
+
+/* Positional alignment */
+/* align-self does not take left and right values */
+align-self: center; /* Put the item around the center */
+align-self: start; /* Put the item at the start */
+align-self: end; /* Put the item at the end */
+align-self: self-start; /* Align the item flush at the start */
+align-self: self-end; /* Align the item flush at the end */
+align-self: flex-start; /* Put the flex item at the start */
+align-self: flex-end; /* Put the flex item at the end */
+
+/* Baseline alignment */
+align-self: baseline;
+align-self: first baseline;
+align-self: last baseline;
+align-self: stretch; /* Stretch 'auto'-sized items to fit the container */
+
+/* Overflow alignment */
+align-self: safe center;
+align-self: unsafe center;
+
+/* Global values */
+align-self: inherit;
+align-self: initial;
+align-self: unset;
+```
+
+### Значения
+
+- `auto`
+ - : Computes to the parent's {{cssxref("align-items")}} value.
+- `normal`
+ - : The effect of this keyword is dependent of the layout mode we are in:\* In absolutely-positioned layouts, the keyword behaves like `start` on _replaced_ absolutely-positioned boxes, and as `stretch` on _all other_ absolutely-positioned boxes.
+ - In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
+ - For flex items, the keyword behaves as `stretch`.
+ - For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
+ - The property doesn't apply to block-level boxes, and to table cells.
+- `self-start`
+ - : Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.
+- `self-end`
+ - : Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.
+- `flex-start`
+ - : The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.
+- `flex-end`
+ - : The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.
+- `center`
+ - : The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.
+- `baseline first baseline`
+ `last baseline`
+ - : Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
+ The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.
+- `stretch`
+ - : If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by {{cssxref("max-height")}}/{{cssxref("max-width")}} (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.
+- `safe`
+ - : If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.
+- `unsafe`
+ - : Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Спецификации
+
+{{Specifications("css.properties.align-self.grid_context")}}
+
+## Совместимость с браузерами
+
+### Support in Flex layout
+
+{{Compat}}
+
+### Support in Grid layout
+
+{{Compat("css.properties.align-self.grid_context")}}
+
+{{CSSRef}}
+
+## Смотрите также
+
+- [Using CSS flexible boxes](/ru/docs/CSS/Using_CSS_flexible_boxes)
+- CSS Flexbox Guide: _[Basic Concepts of Flexbox](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox)_
+- CSS Flexbox Guide: _[Aligning items in a flex container](/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Aligning_Items_in_a_Flex_Container)_
+- CSS Grid Guide: _[Box alignment in CSS Grid layouts](/ru/docs/Web/CSS/CSS_Grid_Layout/Box_Alignment_in_CSS_Grid_Layout)_
+- [CSS Box Alignment](/ru/docs/Web/CSS/CSS_Box_Alignment)
+- The {{cssxref("align-items")}} property
diff --git a/files/ru/web/css/all/index.html b/files/ru/web/css/all/index.html
deleted file mode 100644
index 30fff440ebe9cf..00000000000000
--- a/files/ru/web/css/all/index.html
+++ /dev/null
@@ -1,133 +0,0 @@
----
-title: all
-slug: Web/CSS/all
-translation_of: Web/CSS/all
----
-{{CSSRef}}
-
-Описание
-
-Сокращённое свойство CSS all
-
-{{cssinfo}}
-
-Синтаксис
-
-all: initial;
-all: inherit;
-all: unset;
-
-/* CSS Cascading and Inheritance Level 4 */
-all: revert;
-
-
-Значения
-
-
- initialЭто ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
- inheritЭто ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
- unsetЭто ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
- revertЕсли каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:
-
- user-agent origin
- Эквивалент unset.
- user origin
- Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.
- author origin
- Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.
-
-
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML
-
-<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
-
-CSS
-
-html {
- font-size: small;
- background-color: #F0F0F0;
- color: blue;
-}
-
-blockquote {
- background-color: skyblue;
- color: red;
-}
-
-
-Результат:
-
-
-
No all property
-
-
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
-
-
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue; color: red; }
-{{EmbedLiveSample("ex0", "200", "125")}}
-
-
{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как block элемент : текст, который следует за ним, находится под ним.
-
-
all:unset
-
-
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
-
-
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue; color: red; }
-blockquote { all: unset; }
-{{EmbedLiveSample("ex1", "200", "125")}}
-
-
{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это inline элемент (начальное значение), его {{cssxref("background-color")}} является transparent (начальное значение), но его {{cssxref("font-size")}} по-прежнему small унаследованное значение) и его {{cssxref("color")}} является blue (унаследованное значение).
-
-
all:initial
-
-
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
-
-
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue; color: red; }
-blockquote { all: initial; }
-{{EmbedLiveSample("ex2", "200", "125")}}
-
-
{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это inline элемент(начальное значение), его {{cssxref("background-color")}} является transparent (начальное значение), его {{cssxref("font-size")}} является normal (начальное значение) и его {{cssxref("color")}} является black (начальное значение).
-
-
all:inherit
-
-
<blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
-
-
html { font-size: small; background-color: #F0F0F0; color:blue; }
-blockquote { background-color: skyblue; color: red; }
-blockquote { all: inherit; }
-{{EmbedLiveSample("ex3", "200", "125")}}
-
-
{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это block элемент (унаследованное значение от содержащего его {{HTMLElement("div")}}), его {{cssxref("background-color")}} является transparent (унаследованное значение), его {{cssxref("font-size")}} является small (унаследованное значение) и его {{cssxref("color")}} является blue (унаследованное значение).
-
Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-Значения свойств в масштабе CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, и {{cssxref("revert")}}.
diff --git a/files/ru/web/css/all/index.md b/files/ru/web/css/all/index.md
new file mode 100644
index 00000000000000..b3a0aa93bcdc1c
--- /dev/null
+++ b/files/ru/web/css/all/index.md
@@ -0,0 +1,143 @@
+---
+title: all
+slug: Web/CSS/all
+translation_of: Web/CSS/all
+---
+{{CSSRef}}
+
+## Описание
+
+Сокращённое свойство CSS\_ \_**`all`** сбрасывает все свойства, кроме {{cssxref("unicode-bidi")}} и {{cssxref("direction")}}, до их начального или унаследованного значения.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+all: initial;
+all: inherit;
+all: unset;
+
+/* CSS Cascading and Inheritance Level 4 */
+all: revert;
+```
+
+### Значения
+
+- `initial`
+ - : Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+- `inherit`
+ - : Это ключевое слово указывает на изменение всех свойств, применяемых к элементу или родительскому элементу, на значение их родителя. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+- `unset`
+ - : Это ключевое слово указывает на изменение всех свойств, применимых к элементу или родительскому элементу, на значение их родителя, если они наследуются или на их начальное значение, если нет. Значения {{cssxref("unicode-bidi")}} и {{cssxref("direction")}} не затрагиваются.
+- `revert`
+ - : Если каскадным значением свойства является ключевое слово revert, поведение зависит от источника, которому принадлежит объявление:_ user-agent origin
+ _ : Эквивалент unset.
+ - user origin
+ - : Откатывает каскад до уровня пользовательского агента, так что указанное значение вычисляется так, как если бы для этого свойства не были заданы правила уровня автора или уровня пользователя.
+ - author origin
+ - : Откатывает каскад до уровня пользователя, так что указанное значение вычисляется так, как если бы для этого свойства не было задано никаких правил уровня автора. В целях возврата этот источник включает в себя источники переопределения и анимации.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+**HTML**
+
+```html
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget velit sagittis.
+```
+
+**CSS**
+
+```css
+html {
+ font-size: small;
+ background-color: #F0F0F0;
+ color: blue;
+}
+
+blockquote {
+ background-color: skyblue;
+ color: red;
+}
+```
+
+Результат:
+
+#### No `all` property
+
+```html hidden
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget velit sagittis.
+```
+
+```css hidden
+html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+```
+
+{{EmbedLiveSample("ex0", "200", "125")}}
+
+{{HTMLElement("blockquote")}} использует стили браузера по умолчанию вместе с определённым фоном и цветом текста. Он также ведёт себя как _block_ элемент\_ \_: текст, который следует за ним, находится под ним.
+
+#### `all:unset`
+
+```html hidden
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget velit sagittis.
+```
+
+```css hidden
+html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: unset; }
+```
+
+{{EmbedLiveSample("ex1", "200", "125")}}
+
+{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это _inline_ элемент (начальное значение), его {{cssxref("background-color")}} является `transparent` (начальное значение), но его {{cssxref("font-size")}} по-прежнему `small` унаследованное значение) и его {{cssxref("color")}} является `blue` (унаследованное значение).
+
+#### `all:initial`
+
+```html hidden
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget velit sagittis.
+```
+
+```css hidden
+html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: initial; }
+```
+
+{{EmbedLiveSample("ex2", "200", "125")}}
+
+{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это _inline_ элемент(начальное значение), его {{cssxref("background-color")}} является `transparent` (начальное значение), его {{cssxref("font-size")}} является `normal` (начальное значение) и его {{cssxref("color")}} является `black` (начальное значение).
+
+#### `all:inherit`
+
+```html hidden
+Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus eget velit sagittis.
+```
+
+```css hidden
+html { font-size: small; background-color: #F0F0F0; color:blue; }
+blockquote { background-color: skyblue; color: red; }
+blockquote { all: inherit; }
+```
+
+{{EmbedLiveSample("ex3", "200", "125")}}
+
+{{HTMLElement("blockquote")}} не использует стили браузера по умолчанию: теперь это _block_ элемент (унаследованное значение от содержащего его {{HTMLElement("div")}}), его {{cssxref("background-color")}} является `transparent` (унаследованное значение), его {{cssxref("font-size")}} является `small` (унаследованное значение) и его {{cssxref("color")}} является `blue` (унаследованное значение).
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+Значения свойств в масштабе CSS: {{cssxref("initial")}}, {{cssxref("inherit")}}, {{cssxref("unset")}}, и {{cssxref("revert")}}.
diff --git a/files/ru/web/css/angle/index.html b/files/ru/web/css/angle/index.html
deleted file mode 100644
index 45cd339d590fbc..00000000000000
--- a/files/ru/web/css/angle/index.html
+++ /dev/null
@@ -1,72 +0,0 @@
----
-title:
-slug: Web/CSS/angle
-tags:
- - CSS
- - Web
- - Тип данных CSS
-translation_of: Web/CSS/angle
----
-{{ CSSRef() }}
-
-Тип данных CSS <angle>
-
-{{EmbedInteractiveExample("pages/css/type-angle.html")}}
-
-Синтаксис
-
-Тип данных <angle> состоит из числа ({{cssxref("<number>")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После 0 указывать единицу измерения необязательно.
-
-Опционально перед числом может стоять знак + или - . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, 90deg равняется -270deg, а 1turn равняется 4turn. Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}.
-
-Единицы измерения
-
-
- deg
- Представляет угол в градусах . Один полный круг равен 360deg. Например: 0deg, 90deg, 14.23deg.
-
- grad Представляет угол в градах . Один полный круг равен 400grad. Например: 0grad, 100grad, 38.8grad.
- rad Представляет угол в радианах . Один полный круг равен 2π или примерно 6.2832rad. 1rad - это 180/π градусов. Например: 0rad, 1.0708rad, 6.2832rad.
- turn Представляет угол в количестве оборотов . Один полный круг равен 1turn. Например: 0turn, 0.25turn, 1.2turn.
-
-
-Примеры
-
-
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-
diff --git a/files/ru/web/css/angle/index.md b/files/ru/web/css/angle/index.md
new file mode 100644
index 00000000000000..87d3abd7adbe9f
--- /dev/null
+++ b/files/ru/web/css/angle/index.md
@@ -0,0 +1,47 @@
+---
+title:
+slug: Web/CSS/angle
+tags:
+ - CSS
+ - Web
+ - Тип данных CSS
+translation_of: Web/CSS/angle
+---
+{{ CSSRef() }}
+
+[Тип данных](/ru/docs/Web/CSS/CSS_Types) [CSS](/ru/docs/Web/CSS) **``** представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в {{cssxref ("<gradient>")}} и в некоторых функциях {{cssxref ("transform")}}.
+
+{{EmbedInteractiveExample("pages/css/type-angle.html")}}
+
+## Синтаксис
+
+Тип данных `` состоит из числа ({{cssxref("<number>")}}), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После `0` указывать единицу измерения необязательно.
+
+Опционально перед числом может стоять знак `+` или `-` . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, `90deg` равняется `-270deg`, а `1turn` равняется `4turn`. Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении {{cssxref ("animation")}} или {{cssxref ("transition")}}.
+
+### Единицы измерения
+
+- deg
+ - : Представляет угол в [градусах](). Один полный круг равен `360deg`. Например: `0deg`, `90deg`, `14.23deg`.
+- grad
+ - : Представляет угол в [градах](https://ru.wikipedia.org/wiki/Град,_минута,_секунда). Один полный круг равен `400grad`. Например: `0grad`, `100grad`, `38.8grad`.
+- rad
+ - : Представляет угол в [радианах](https://ru.wikipedia.org/wiki/Радиан). Один полный круг равен 2π или примерно `6.2832rad`. `1rad` - это 180/π градусов. Например: `0rad`, `1.0708rad`, `6.2832rad`.
+- turn
+ - : Представляет угол в количестве [оборотов](). Один полный круг равен `1turn`. Например: `0turn`, `0.25turn`, `1.2turn`.
+
+## Примеры
+
+|  | Прямой угол: ` 90deg = 100grad = 0.25turn``≈`` 1.5708rad ` |
+| ------------------------------------------------------------ | ----------------------------------------------------------------------------------------- |
+|  | Развёрнутый угол: ` 180deg = 200grad = 0.5turn`` ``≈`` 3.1416rad ` |
+|  | Прямой угол (против часовой стрелки): `-90deg = -100grad = -0.25turn` ` ≈`` -1.5708rad ` |
+|  | Нулевой угол: ` 0deg = 0grad = 0turn`` ``=`` 0rad ` |
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/animation-delay/index.html b/files/ru/web/css/animation-delay/index.html
deleted file mode 100644
index 725f4c35fec4a1..00000000000000
--- a/files/ru/web/css/animation-delay/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: animation-delay
-slug: Web/CSS/animation-delay
-tags:
- - CSS
- - CSS-анимации
- - CSS-свойства
-translation_of: Web/CSS/animation-delay
----
-{{CSSRef}}{{SeeCompatTable}}
-
-Описание
-
-CSS свойство animation-delay
-
-{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
-
-Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.
-
-При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.
-
-{{cssinfo}}
-
-Синтаксис
-
-animation-delay: 3s;
-animation-delay: 2s, 4ms;
-
-
-Значения
-
-
- <time>Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Посмотрите CSS-анимации для примера.
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-delay/index.md b/files/ru/web/css/animation-delay/index.md
new file mode 100644
index 00000000000000..39c9b12d684e3b
--- /dev/null
+++ b/files/ru/web/css/animation-delay/index.md
@@ -0,0 +1,55 @@
+---
+title: animation-delay
+slug: Web/CSS/animation-delay
+tags:
+ - CSS
+ - CSS-анимации
+ - CSS-свойства
+translation_of: Web/CSS/animation-delay
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") свойство **`animation-delay`** определяет время задержки перед стартом анимации.
+
+{{EmbedInteractiveExample("pages/css/animation-delay.html")}}
+
+Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.
+
+При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+animation-delay: 3s;
+animation-delay: 2s, 4ms;
+```
+
+### Значения
+
+- ``
+ - : Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Посмотрите [CSS-анимации](/ru/docs/CSS/CSS_animations "CSS/CSS_animations") для примера.
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS-анимаций](/ru/docs/CSS/Tutorials/Using_CSS_animations "Tutorial about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/ru/web/css/animation-direction/index.html b/files/ru/web/css/animation-direction/index.html
deleted file mode 100644
index b75ba870b161a5..00000000000000
--- a/files/ru/web/css/animation-direction/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: animation-direction
-slug: Web/CSS/animation-direction
-translation_of: Web/CSS/animation-direction
----
-{{CSSRef}}{{SeeCompatTable}}
-
-Описание
-
-CSS-свойство animation-directionТакже удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* Одиночная анимация */
-animation-direction: normal;
-animation-direction: reverse;
-animation-direction: alternate;
-animation-direction: alternate-reverse;
-
-/* Несколько анимаций */
-animation-direction: normal, reverse;
-animation-direction: alternate, reverse, normal;
-
-/* Глобальные значения */
-animation-direction: inherit;
-animation-direction: initial;
-animation-direction: unset;
-
-
-Значения
-
-
- normalАнимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в начальное положение и снова проигрывается. Это значение по умолчанию.
- reverseАнимация проигрывается наоборот, с последнего положения до первого и потом снова сбрасывается в конечное положение и снова проигрывается.
- alternateАнимация меняет направление в каждом цикле, то есть в первом цикле она начинает с начального положения, доходит до конечного , а во втором цикле продолжает с конечного и доходит до начального и так далее, в зависимости от количества циклов анимации animation-iteration-count.
- alternate-reverseАнимация начинает проигрываться с конечного положения и доходит до начального , а в следующем цикле продолжая с начального переходит в конечное , в зависимости от количества итераций анимации animation-iteration-count.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Смотрите примеры CSS а нимаций.
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-direction/index.md b/files/ru/web/css/animation-direction/index.md
new file mode 100644
index 00000000000000..ffc1feaf901871
--- /dev/null
+++ b/files/ru/web/css/animation-direction/index.md
@@ -0,0 +1,65 @@
+---
+title: animation-direction
+slug: Web/CSS/animation-direction
+translation_of: Web/CSS/animation-direction
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+## Описание
+
+CSS-свойство **`animation-direction`** определяет, должна ли анимация воспроизводиться вперёд, назад или переменно вперёд и назад.
+
+Также удобно использовать сокращённое свойство {{cssxref("animation")}}, чтобы одновременно установить все свойства анимации.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* Одиночная анимация */
+animation-direction: normal;
+animation-direction: reverse;
+animation-direction: alternate;
+animation-direction: alternate-reverse;
+
+/* Несколько анимаций */
+animation-direction: normal, reverse;
+animation-direction: alternate, reverse, normal;
+
+/* Глобальные значения */
+animation-direction: inherit;
+animation-direction: initial;
+animation-direction: unset;
+```
+
+### Значения
+
+- `normal`
+ - : Анимация проигрывается вперёд каждую итерацию, то есть, когда анимация заканчивается, она сразу сбрасывается в _начальное_ положение и снова проигрывается. Это значение по умолчанию.
+- `reverse`
+ - : Анимация проигрывается наоборот, с _последнего_ положения до первого и потом снова сбрасывается в _конечное_ положение и снова проигрывается.
+- `alternate`
+ - : Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с _начального_ положения, доходит до _конечного_, а во втором цикле продолжает с _конечного_ и доходит до _начального_ и так далее, в зависимости от количества циклов анимации `animation-iteration-count`.
+- `alternate-reverse`
+ - : Анимация начинает проигрываться с _конечного_ положения и доходит до _начального_, а в следующем цикле продолжая с _начального_ переходит в _конечное_, в зависимости от количества итераций анимации `animation-iteration-count`.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Смотрите примеры [CSS а](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "CSS/CSS_animations")нимаций.
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS-анимации](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "Tutorial about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/ru/web/css/animation-duration/index.html b/files/ru/web/css/animation-duration/index.html
deleted file mode 100644
index d7ac617495b248..00000000000000
--- a/files/ru/web/css/animation-duration/index.html
+++ /dev/null
@@ -1,58 +0,0 @@
----
-title: animation-duration
-slug: Web/CSS/animation-duration
-translation_of: Web/CSS/animation-duration
----
-{{CSSRef}} {{ SeeCompatTable() }}
-
-Описание
-
-Свойство animation-duration
-
-
-
-Значение по умолчанию 0s
-
-Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.
-
-{{cssinfo}}
-
-Синтаксис
-
-animation-duration: 6s;
-animation-duration: 120ms;
-animation-duration: 1s, 15s;
-animation-duration: 10s, 30s, 230ms;
-
-
-Примеры
-
-
- <time>Длительность анимации определяется в секундах s или в миллисекундах ms. По умолчанию стоит значение 0s. Отрицательные значения являются недействительными.
-
-
-Предупреждение: Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными 0s.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Смотрите для примеров CSS-анимации .
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-duration/index.md b/files/ru/web/css/animation-duration/index.md
new file mode 100644
index 00000000000000..13361ccd526d1d
--- /dev/null
+++ b/files/ru/web/css/animation-duration/index.md
@@ -0,0 +1,53 @@
+---
+title: animation-duration
+slug: Web/CSS/animation-duration
+translation_of: Web/CSS/animation-duration
+---
+{{CSSRef}} {{ SeeCompatTable() }}
+
+## Описание
+
+Свойство **`animation-duration`** устанавливает длительность анимации во времени за один цикл.
+
+Значение по умолчанию **`0s` **определяет, что анимация не должна выполняться.
+
+Удобно использовать сокращённое свойство {{ cssxref("animation") }} чтобы установить сразу все свойства анимации.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+animation-duration: 6s;
+animation-duration: 120ms;
+animation-duration: 1s, 15s;
+animation-duration: 10s, 30s, 230ms;
+```
+
+### Примеры
+
+- ``
+ - : Длительность анимации определяется в секундах `s` или в миллисекундах `ms`. По умолчанию стоит значение `0s`. Отрицательные значения являются недействительными.
+
+> **Примечание:** **Предупреждение:** Отрицательные значения являются недействительными и отменяют объявление. Некоторые старые реализации считают отрицательные значения равнозначными `0s`.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Смотрите для примеров [CSS-анимации](/en/CSS/CSS_animations "en/CSS/CSS_animations").
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS-анимации](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "Tutorial about CSS animations")
+- {{ domxref("AnimationEvent", "AnimationEvent") }}
diff --git a/files/ru/web/css/animation-fill-mode/index.html b/files/ru/web/css/animation-fill-mode/index.html
deleted file mode 100644
index 6a390295500659..00000000000000
--- a/files/ru/web/css/animation-fill-mode/index.html
+++ /dev/null
@@ -1,166 +0,0 @@
----
-title: animation-fill-mode
-slug: Web/CSS/animation-fill-mode
-tags:
- - CSS
- - CSS-анимации
- - CSS-свойства
-translation_of: Web/CSS/animation-fill-mode
----
-{{CSSRef}}{{SeeCompatTable}}
-
-Описание
-
-CSS свойство animation-fill-mode
-
-{{cssinfo}}
-
-Синтаксис
-
-animation-fill-mode: none;
-animation-fill-mode: forwards;
-animation-fill-mode: backwards;
-animation-fill-mode: both;
-
-/* Несколько значений могут быть заданы через запятую. */
-/* Каждое значение соответствует для анимации в animation-name. */
-animation-fill-mode: none, backwards;
-animation-fill-mode: both, forwards, none;
-
-
-Значения
-
-
- noneСтили анимации не будут применены к элементу до и после её выполнения.
- forwardsПо окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}:
-
-
-
- animation-directionanimation-iteration-countпоследний ключевой кадр
-
-
-
-
- normalлюбое
- 100% или to
-
- reverseлюбое
- 0% или from
-
- alternateчётное
- 0% или from
-
- alternateнечётное
- 100% или to
-
- alternate-reverseчётное
- 100% или to
-
- alternate-reverseнечётное
- 0% или from
-
-
-
- backwardsЭлемент сохранит стиль первого ключевого кадра на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}:
-
-
-
- animation-directionпервый ключевой кадр
-
-
-
-
- normal или alternate0% или from
-
- reverse или alternate-reverse100% или to
-
-
-
- bothАнимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.
-
-HTML
-
-<p>Наведите курсор мыши на серый блок</p>
-<div class="demo">
- <div class="grows">Этот просто растёт</div>
- <div class="growsandstays">Этот растёт и остаётся большим</div>
-</div>
-
-CSS
-
-.demo {
- border-top: 100px solid #ccc;
- height: 300px;
- font-family: sans-serif;
-}
-@keyframes grow {
- 0% { font-size: 0 }
- 100% { font-size: 40px }
-}
-@-webkit-keyframes grow {
- 0% { font-size: 0 }
- 100% { font-size: 40px }
-}
-.demo:hover .grows {
- animation-name: grow;
- animation-duration: 3s;
- -webkit-animation-name: grow;
- -webkit-animation-duration: 3s;
-}
-.demo:hover .growsandstays {
- animation-name: grow;
- animation-duration: 3s;
- animation-fill-mode: forwards;
- -webkit-animation-name: grow;
- -webkit-animation-duration: 3s;
- -webkit-animation-fill-mode: forwards;
-}
-
-{{EmbedLiveSample('Example',700,300)}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-fill-mode/index.md b/files/ru/web/css/animation-fill-mode/index.md
new file mode 100644
index 00000000000000..6f3d60cf835cef
--- /dev/null
+++ b/files/ru/web/css/animation-fill-mode/index.md
@@ -0,0 +1,116 @@
+---
+title: animation-fill-mode
+slug: Web/CSS/animation-fill-mode
+tags:
+ - CSS
+ - CSS-анимации
+ - CSS-свойства
+translation_of: Web/CSS/animation-fill-mode
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+## Описание
+
+[CSS](/en/CSS "CSS") свойство **`animation-fill-mode`** определяет, как нужно применять стили к объекту анимации до и после её выполнения.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+animation-fill-mode: none;
+animation-fill-mode: forwards;
+animation-fill-mode: backwards;
+animation-fill-mode: both;
+
+/* Несколько значений могут быть заданы через запятую. */
+/* Каждое значение соответствует для анимации в animation-name. */
+animation-fill-mode: none, backwards;
+animation-fill-mode: both, forwards, none;
+```
+
+### Значения
+
+- `none`
+ - : Стили анимации не будут применены к элементу до и после её выполнения.
+- `forwards`
+ - | : По окончании анимации элемент сохранит стили последнего ключевого кадра, который определяется значениями {{cssxref("animation-direction")}} и {{cssxref("animation-iteration-count")}}: | `animation-direction` | `animation-iteration-count` | последний ключевой кадр |
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------------- | ----------------------- |
+ | `normal` | любое | `100%` или `to` |
+ | `reverse` | любое | `0%` или `from` |
+ | `alternate` | чётное | `0%` или `from` |
+ | `alternate` | нечётное | `100%` или `to` |
+ | `alternate-reverse` | чётное | `100%` или `to` |
+ | `alternate-reverse` | нечётное | `0%` или `from` |
+- `backwards`
+ - | : Элемент сохранит стиль первого [ключевого кадра](/ru/docs/CSS/@keyframes) на протяжении периода {{cssxref("animation-delay")}}. Первый ключевой кадр определяется значением {{cssxref("animation-direction")}}: | `animation-direction` | первый ключевой кадр |
+ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | -------------------- |
+ | `normal` или `alternate` | `0%` или `from` |
+ | `reverse` или `alternate-reverse` | ` 100% или ``to` |
+- `both`
+ - : Анимация будет вести себя так, как будто значения forwards и backwards заданы одновременно.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+Вы можете посмотреть эффект animation-fill-mode в следующем примере. По умолчанию, по окончании анимации стиль элемента возвращается к исходному. Значение forwards сохранит для элемента стиль последнего ключевого кадра.
+
+### HTML
+
+```html
+Наведите курсор мыши на серый блок
+
+
Этот просто растёт
+
Этот растёт и остаётся большим
+
{{ CSSRef() }}
-
-{{ SeeCompatTable() }}
-
-Обзор
-
-CSS свойство animation-iteration-count
-
-Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.
-
-{{cssinfo}}
-
-Синтаксис
-
-animation-iteration-count: infinite;
-animation-iteration-count: 3;
-animation-iteration-count: 2.3;
-
-animation-iteration-count: 2, 0, infinite;
-
-
-Значения
-
-
- infiniteАнимация повторяется бесконечно.
- <number>Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).
-
-
-Правила синтаксиса
-
-{{csssyntax}}
-
-Примеры
-
-Смотрите примеры CSS-анимации .
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Также смотрите
-
-
diff --git a/files/ru/web/css/animation-iteration-count/index.md b/files/ru/web/css/animation-iteration-count/index.md
new file mode 100644
index 00000000000000..59d6784056ee9a
--- /dev/null
+++ b/files/ru/web/css/animation-iteration-count/index.md
@@ -0,0 +1,58 @@
+---
+title: animation-iteration-count
+slug: Web/CSS/animation-iteration-count
+tags:
+ - CSS
+ - CSS Animations
+ - CSS Property
+ - Experimental
+ - Reference
+translation_of: Web/CSS/animation-iteration-count
+---
+{{ CSSRef() }}{{ SeeCompatTable() }}
+
+## Обзор
+
+[CSS](/ru/CSS "CSS")` свойство animation-iteration-count` определяет сколько раз будет проигрываться анимационный цикл, перед тем как остановиться.
+
+Наиболее удобно использовать это свойство в сокращённом варианте {{ cssxref("animation") }}, в котором указываются все анимационные свойства.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+animation-iteration-count: infinite;
+animation-iteration-count: 3;
+animation-iteration-count: 2.3;
+
+animation-iteration-count: 2, 0, infinite;
+```
+
+### Значения
+
+- `infinite`
+ - : Анимация повторяется бесконечно.
+- ``
+ - : Сколько раз анимация будет повторяться; по умолчанию 1. Отрицательные значения не используются. Можно использовать не целые значения, для проигрывания части анимационного цикла (например, 0.5 воспроизведёт половину анимационного цикла).
+
+### Правила синтаксиса
+
+{{csssyntax}}
+
+## Примеры
+
+Смотрите примеры [CSS-анимации](/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy).
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Также смотрите
+
+- [Использование CSS-анимацией](/ru/docs/Web/CSS/CSS_Animations/Ispolzovanie_CSS_animatciy "Обучение CSS-анимациям")
+- {{ domxref("AnimationEvent", "AnimationEvent") }}
diff --git a/files/ru/web/css/animation-name/index.html b/files/ru/web/css/animation-name/index.html
deleted file mode 100644
index 190f44374a6ad7..00000000000000
--- a/files/ru/web/css/animation-name/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: animation-name
-slug: Web/CSS/animation-name
-translation_of: Web/CSS/animation-name
----
-{{CSSRef}} {{SeeCompatTable}}
-
-Описание
-
-CSS свойство animation-name
-
-{{EmbedInteractiveExample("pages/css/animation-name.html")}}
-
-
-
-Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.
-
-Синтаксис
-
-initial
-animation-name: inherit
-animation-name: unset
-Значения
-
-
- noneЭто специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
- {{cssxref("custom-ident","<custom-ident>")}}
- Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от a до z, цифр от 0 до 9, подчёркивания (_), и/или черты (-). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть none, unset, initial, или inherit в любой комбинации случаев.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-См. CSS animations .
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-name/index.md b/files/ru/web/css/animation-name/index.md
new file mode 100644
index 00000000000000..b97d4f5a8be05c
--- /dev/null
+++ b/files/ru/web/css/animation-name/index.md
@@ -0,0 +1,62 @@
+---
+title: animation-name
+slug: Web/CSS/animation-name
+translation_of: Web/CSS/animation-name
+---
+{{CSSRef}} {{SeeCompatTable}}
+
+## Описание
+
+[CSS](/ru/docs/CSS "CSS") свойство **`animation-name`** задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом {{cssxref("@keyframes")}}, которое задаёт значения свойств для последовательности анимации.
+
+{{EmbedInteractiveExample("pages/css/animation-name.html")}}
+
+Часто удобно использовать сокращённое свойство {{cssxref("animation")}} для одновременной установки всех свойств анимации.
+
+## Синтаксис
+
+```css
+/* Single animation */
+animation-name: none;
+animation-name: test_05;
+animation-name: -specific;
+animation-name: sliding-vertically;
+
+/* Multiple animations */
+animation-name: test1;
+animation-name: test1, animation4;
+animation-name: none, -moz-specific, sliding;
+
+/* Global values */
+animation-name: initial
+animation-name: inherit
+animation-name: unset
+```
+
+### Значения
+
+- `none`
+ - : Это специальное ключевое слово, обозначающее отсутствие ключевых кадров. Оно может быть использовано для отключения анимации без изменения порядка других идентификаторов, или для отключения анимации, поступающей из каскада.
+- {{cssxref("custom-ident","<custom-ident>")}}
+ - : Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от `a` до `z`, цифр от `0` до `9`, подчёркивания (`_`), и/или черты (`-`). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть `none`, `unset`, `initial`, или `inherit` в любой комбинации случаев.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+См. [CSS animations](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "CSS/CSS_animations").
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS-анимации](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "Tutorial about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/ru/web/css/animation-play-state/index.html b/files/ru/web/css/animation-play-state/index.html
deleted file mode 100644
index 6ed380cba1d4ad..00000000000000
--- a/files/ru/web/css/animation-play-state/index.html
+++ /dev/null
@@ -1,62 +0,0 @@
----
-title: animation-play-state
-slug: Web/CSS/animation-play-state
-translation_of: Web/CSS/animation-play-state
----
-{{CSSRef}}{{SeeCompatTable}}
-
-Описание
-
-Свойство animation-play-state
-
-Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* Одна анимация */
-animation-play-state: running;
-animation-play-state: paused;
-
-/* Несколько анимаций */
-animation-play-state: paused, running, running;
-
-/* Глобальный значения */
-animation-play-state: inherited;
-animation-play-state: initial;
-animation-play-state: unset;
-
-
-Значения
-
-
- runningАнимация проигрывается.
- pausedАнимация поставлена на паузу.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-Примеры
-
-См. CSS animations .
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-play-state/index.md b/files/ru/web/css/animation-play-state/index.md
new file mode 100644
index 00000000000000..3299cefd976eed
--- /dev/null
+++ b/files/ru/web/css/animation-play-state/index.md
@@ -0,0 +1,58 @@
+---
+title: animation-play-state
+slug: Web/CSS/animation-play-state
+translation_of: Web/CSS/animation-play-state
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+## Описание
+
+Свойство **`animation-play-state`** определяет состояние анимации, паузы или проигрыша. Это можно использовать, чтобы определить текущее состояние анимации, например, в скриптах.
+
+Если возобновить приостановленную анимацию, то она запустит её с того места, где она была поставлена на паузу, а не начнётся с начала.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* Одна анимация */
+animation-play-state: running;
+animation-play-state: paused;
+
+/* Несколько анимаций */
+animation-play-state: paused, running, running;
+
+/* Глобальный значения */
+animation-play-state: inherited;
+animation-play-state: initial;
+animation-play-state: unset;
+```
+
+### Значения
+
+- `running`
+ - : Анимация проигрывается.
+- `paused`
+ - : Анимация поставлена на паузу.
+
+### Формальный синтаксис
+
+ {{csssyntax}}
+
+## Примеры
+
+См. [CSS animations](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "CSS/CSS_animations").
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS-анимаций](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "Tutorial about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/ru/web/css/animation-timing-function/index.html b/files/ru/web/css/animation-timing-function/index.html
deleted file mode 100644
index 960f0ca2aa0cb0..00000000000000
--- a/files/ru/web/css/animation-timing-function/index.html
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: animation-timing-function
-slug: Web/CSS/animation-timing-function
-translation_of: Web/CSS/animation-timing-function
----
-{{CSSRef}}
-
-CSS свойство animation-timing-function
-
-{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
-
-
-
-Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.
-
-Синтаксис
-
-
-animation-timing-function : ease;
-animation-timing-function : ease-in;
-animation-timing-function : ease-out;
-animation-timing-function : ease-in-out;
-animation-timing-function : linear;
-animation-timing-function : step-start;
-animation-timing-function : step-end;
-
-
-animation-timing-function : cubic-bezier ( 0.1 , 0.7 , 1.0 , 0.1 ) ;
-animation-timing-function : steps ( 4 , end) ;
-
-
-animation-timing-function : steps ( 4 , jump-start) ;
-animation-timing-function : steps ( 10 , jump-end) ;
-animation-timing-function : steps ( 20 , jump-none) ;
-animation-timing-function : steps ( 5 , jump-both) ;
-animation-timing-function : steps ( 6 , start) ;
-animation-timing-function : steps ( 8 , end) ;
-
-
-animation-timing-function : ease, step-start, cubic-bezier ( 0.1 , 0.7 , 1.0 , 0.1 ) ;
-
-
-animation-timing-function : inherit;
-animation-timing-function : initial;
-animation-timing-function : unset; Временные функции могут быть установлены в пользовательских ключевых кадрах в правилах @keyframes . Если в ключевом кадре значение animation-timing-function animation-timing-function
-
-Значения
-
-
- <timingfunction>Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-См. CSS animations .
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation-timing-function/index.md b/files/ru/web/css/animation-timing-function/index.md
new file mode 100644
index 00000000000000..bd281dcf328b5e
--- /dev/null
+++ b/files/ru/web/css/animation-timing-function/index.md
@@ -0,0 +1,73 @@
+---
+title: animation-timing-function
+slug: Web/CSS/animation-timing-function
+translation_of: Web/CSS/animation-timing-function
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/CSS "CSS") свойство **`animation-timing-function`** задаёт как происходит анимация в течении длительности каждого цикла.
+
+{{EmbedInteractiveExample("pages/css/animation-timing-function.html")}}
+
+Достаточно удобно использовать сокращённое свойство {{cssxref("animation")}} для того, чтобы установить все свойства для анимации одновременно.
+
+## Синтаксис
+
+```css
+/* Keyword values */
+animation-timing-function: ease;
+animation-timing-function: ease-in;
+animation-timing-function: ease-out;
+animation-timing-function: ease-in-out;
+animation-timing-function: linear;
+animation-timing-function: step-start;
+animation-timing-function: step-end;
+
+/* Function values */
+animation-timing-function: cubic-bezier(0.1, 0.7, 1.0, 0.1);
+animation-timing-function: steps(4, end);
+
+/* Steps Function keywords */
+animation-timing-function: steps(4, jump-start);
+animation-timing-function: steps(10, jump-end);
+animation-timing-function: steps(20, jump-none);
+animation-timing-function: steps(5, jump-both);
+animation-timing-function: steps(6, start);
+animation-timing-function: steps(8, end);
+
+/* Multiple animations */
+animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1.0, 0.1);
+
+/* Global values */
+animation-timing-function: inherit;
+animation-timing-function: initial;
+animation-timing-function: unset;
+```
+
+Временные функции могут быть установлены в пользовательских ключевых кадрах в правилах [@keyframes](/ru/docs/Web/CSS/@keyframes). Если в ключевом кадре значение **`animation-timing-function`** указано, соответствующее значение **`animation-timing-function`** от элемента к которому анимация применена используется для этого ключевого кадра.
+
+### Значения
+
+- ``
+ - : Каждый {{cssxref("<timing-function>")}} представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в {{cssxref("animation-property")}}.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+См. [CSS animations](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "en-US/docs/CSS/CSS_animations").
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+Смотрите также
+
+- [Использование CSS-анимаций](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations "CSS developer guide about CSS animations")
+- {{domxref("AnimationEvent", "AnimationEvent")}}
diff --git a/files/ru/web/css/animation/index.html b/files/ru/web/css/animation/index.html
deleted file mode 100644
index 9d26908c0abd6f..00000000000000
--- a/files/ru/web/css/animation/index.html
+++ /dev/null
@@ -1,103 +0,0 @@
----
-title: animation
-slug: Web/CSS/animation
-translation_of: Web/CSS/animation
----
-{{CSSRef}}
-
-CSS свойство animationкороткая запись для {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}} и {{cssxref("animation-play-state")}}.
-
-{{EmbedInteractiveExample("pages/css/animation.html")}}
-
-Описание того, какие свойства являются анимируемые доступно; стоит отметить, что это описание также подходит для CSS переходов .
-
-{{cssinfo}}
-
-Синтаксис
-
-/* @keyframes duration | timing-function | delay |
- iteration-count | direction | fill-mode | play-state | name */
- animation: 3s ease-in 1s 2 reverse both paused slidein;
-
-/* @keyframes duration | timing-function | delay | name */
- animation: 3s linear 1s slidein;
-
-/* @keyframes duration | name */
- animation: 3s slidein;
-
-
-Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("<time>")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}.
-
-Note that order is also important within each animation definition for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsing, keywords that are valid for properties other than {{cssxref("animation-name")}} whose values were not found earlier in the shorthand must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Посмотрите примеры CSS-анимаций.
-
-Cylon Eye
-
-Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:
-
-<div class="view_port">
- <div class="polling_message">
- Listening for dispatches
- </div>
- <div class="cylon_eye"></div>
-</div>
-
-
-.polling_message {
- color: white;
- float: left;
- margin-right: 2%;
-}
-
-.view_port {
- background-color: black;
- height: 25px;
- width: 100%;
- overflow: hidden;
-}
-
-.cylon_eye {
- background-color: red;
- background-image: -webkit-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
- background-image: -moz-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
- background-image: -o-linear-gradient( left, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
- background-image: linear-gradient(to right, rgba( 0,0,0,0.9 ) 25%, rgba( 0,0,0,0.1 ) 50%, rgba( 0,0,0,0.9 ) 75%);
- color: white;
- height: 100%;
- width: 20%;
-
- -webkit-animation: 4s linear 0s infinite alternate move_eye;
- -moz-animation: 4s linear 0s infinite alternate move_eye;
- -o-animation: 4s linear 0s infinite alternate move_eye;
- animation: 4s linear 0s infinite alternate move_eye;
-}
-
-@-webkit-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
- @-moz-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
- @-o-keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
- @keyframes move_eye { from { margin-left:-20%; } to { margin-left:100%; } }
-
-
-{{EmbedLiveSample('Cylon_Eye')}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/animation/index.md b/files/ru/web/css/animation/index.md
new file mode 100644
index 00000000000000..4ab6e4fa336c2a
--- /dev/null
+++ b/files/ru/web/css/animation/index.md
@@ -0,0 +1,104 @@
+---
+title: animation
+slug: Web/CSS/animation
+translation_of: Web/CSS/animation
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`animation`** это [короткая запись](/ru/docs/Web/CSS/Shorthand_properties) для {{cssxref("animation-name")}}, {{cssxref("animation-duration")}}, {{cssxref("animation-timing-function")}}, {{cssxref("animation-delay")}}, {{cssxref("animation-iteration-count")}}, {{cssxref("animation-direction")}}, {{cssxref("animation-fill-mode")}} и {{cssxref("animation-play-state")}}.
+
+{{EmbedInteractiveExample("pages/css/animation.html")}}
+
+[Описание того, какие свойства являются анимируемые](/ru/docs/Web/Guide/CSS/Using_CSS_transitions#Which_CSS_properties_are_animatable) доступно; стоит отметить, что это описание также подходит для [CSS переходов](/ru/docs/Web/Guide/CSS/Using_CSS_transitions).
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* @keyframes duration | timing-function | delay |
+ iteration-count | direction | fill-mode | play-state | name */
+ animation: 3s ease-in 1s 2 reverse both paused slidein;
+
+/* @keyframes duration | timing-function | delay | name */
+ animation: 3s linear 1s slidein;
+
+/* @keyframes duration | name */
+ animation: 3s slidein;
+```
+
+Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как {{cssxref("<time>")}} присваивается {{cssxref("animation-duration")}}, и второй назначен {{cssxref("animation-delay")}}.
+
+Note that order is also important within each animation definition for distinguishing {{cssxref("animation-name")}} values from other keywords. When parsing, keywords that are valid for properties other than {{cssxref("animation-name")}} whose values were not found earlier in the shorthand must be accepted for those properties rather than for {{cssxref("animation-name")}}. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an {{cssxref("animation-name")}} that could be a value of another property, and may be output in additional cases.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Посмотрите примеры [CSS-анимаций.](/ru/docs/Web/CSS/CSS_Animations/Using_CSS_animations)
+
+### Cylon Eye
+
+Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:
+
+```html
+
+
+ Listening for dispatches
+
+
+
{{CSSRef}}{{SeeCompatTable}}
-
-CSS-свойство -moz-appearance
-
-Свойство -webkit-appearance-webkit-appearance, для обеспечения совместимости.
-
-{{EmbedInteractiveExample("pages/css/appearance.html")}}
-
-
-
-Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации XBL виджетов, которые поставляются с платформой Mozilla.
-
-
-
Примечание о совместимости : Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово none не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.
-
Синтаксис
-
-/* CSS модуль базового интерфейса 4 уровня, значения */
-appearance: none;
-appearance: auto;
-appearance: button;
-appearance: textfield;
-appearance: searchfield;
-appearance: textarea;
-appearance: push-button;
-appearance: button-bevel;
-appearance: slider-horizontal;
-appearance: checkbox;
-appearance: radio;
-appearance: square-button;
-appearance: menulist;
-appearance: menulist-button;
-appearance: listbox;
-appearance: meter;
-appearance: progress-bar;
-
-/* Частичный список доступных значений в Gecko */
--moz-appearance: scrollbarbutton-up;
--moz-appearance: button-bevel;
-
-/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
--webkit-appearance: media-mute-button;
--webkit-appearance: caret;
-
-
-Свойство -moz-appearance может быть указано как одно значение, выбранное из списка ниже.
-
-Значения
-
-<appearance> является одним из нижеследующих ключевых свойств:
-
-
-
-
- Value
- Demo
- Browser
- Description
-
-
- none
-
-
-div{ color: black;
--moz-appearance:none;
--webkit-appearance:none;
-appearance:none; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
- No special styling is applied. This is the default.
-
-
- auto {{Experimental_Inline}}
-
-
-div{ color: black;
--moz-appearance: auto;
--webkit-appearance: auto;
-appearance:auto; }
-
-
-<div>Lorem</div>
-
- None
- The user agent selects the appropriate special styling based on the element. Acts as none on elements with no special styling.
-
-
- attachment {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: attachment;
--webkit-appearance: attachment; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- borderless-attachment {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: borderless-attachment;
--webkit-appearance: borderless-attachment; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
- The element is drawn like a button.
-
-
- button-arrow-down {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- button-arrow-next {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- button-arrow-previous {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- button-arrow-up {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- button-bevel {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
-
-
-
- button-focus {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- caps-lock-indicator {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: caps-lock-indicator;
--webkit-appearance: caps-lock-indicator; }
-
-
-<div>Lorem</div>
-
- Safari Edge
-
-
-
- caret {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: caret;
--webkit-appearance: caret; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- checkbox {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: checkbox;
--webkit-appearance: checkbox; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
- The element is drawn like a checkbox, including only the actual "checkbox" portion.
-
-
- checkbox-container {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: checkbox-container;
--webkit-appearance: checkbox-container; }
-
-
-<div>Lorem</div>
-
- Firefox
- The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox.
-
-
- checkbox-label {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: checkbox-label;
--webkit-appearance: checkbox-label; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- checkmenuitem {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- color-well {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: color-well;
--webkit-appearance: color-well; }
-
-
-<div>Lorem</div>
-
- Safari
- input type=color
-
- continuous-capacity-level-indicator {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: continuous-capacity-level-indicator;
--webkit-appearance: continuous-capacity-level-indicator; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- default-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}}
- Safari Edge
-
-
-
- discrete-capacity-level-indicator {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: discrete-capacity-level-indicator;
--webkit-appearance: discrete-capacity-level-indicator; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- dualbutton {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- groupbox {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: groupbox;
--webkit-appearance: groupbox; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in FF 64
-
-
- inner-spin-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}}
- Firefox Chrome Safari
-
-
-
- image-controls-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}}
- Safari
-
-
-
- list-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}}
- Safari
- datalist
-
-
- listbox {{Non-standard_Inline}}
-
-
-div { color: black; height:20px;
--moz-appearance: listbox;
--webkit-appearance: listbox; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- listitem {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: listitem;
--webkit-appearance: listitem; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- media-enter-fullscreen-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-exit-fullscreen-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-fullscreen-volume-slider {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-fullscreen-volume-slider-thumb {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-mute-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- media-play-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- media-overlay-play-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-return-to-realtime-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-rewind-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-seek-back-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}}
- Safari Edge
-
-
-
- media-seek-forward-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}}
- Safari Edge
-
-
-
- media-toggle-closed-captions-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-slider {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- media-sliderthumb {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- media-volume-slider-container {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-volume-slider-mute-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-volume-slider {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-volume-sliderthumb {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-controls-background {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-controls-dark-bar-background {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-controls-fullscreen-background {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-controls-light-bar-background {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}}
- Safari
-
-
-
- media-current-time-display {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}}
- Chrome Safari
-
-
-
- media-time-remaining-display {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: media-time-remaining-display; }
-
-
-<div>Lorem</div>
-
- Chrome Safari
-
-
-
- menuarrow {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menubar {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menucheckbox {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menuimage {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menuitem {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered.
-
-
- menuitemtext {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}}
- Firefox
- Removed in FF 64
-
-
- menulist {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
-
-
-
- menulist-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
- The element is styled as a button that would indicate a menulist can be opened.
-
-
- menulist-text {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
-
-
-
- menulist-textfield {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}}
- Firefox Chrome Safari Edge
- The element is styled as the text field for a menulist. (Not implemented for the Windows platform)
-
-
- menupopup {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menuradio {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- menuseparator {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64
-
-
- meter
-
-
-div{ color: black;
--webkit-appearance: meter; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Firefox
- New in Fx 64
-
-
- meterbar {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: meterbar;
--webkit-appearance: meterbar; }
-
-
-<div>Lorem</div>
-
- Firefox
- New in Fx 16. Use meter instead
-
-
- meterchunk {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: meterchunk;
--webkit-appearance: meterchunk; }
-
-
-<div>Lorem</div>
-
- Firefox
- New in Fx 16. Removed in Firefox 64.
-
-
- number-input {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- progress-bar
-
-
-div{ color: black;
--webkit-appearance: progress-bar; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Firefox
- New in Fx 64
-
-
- progress-bar-value {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: progress-bar-value; }
-
-
-<div>Lorem</div>
-
- Chrome Safari
-
-
-
- progressbar {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: progressbar;
--webkit-appearance: progressbar; }
-
-
-<div>Lorem</div>
-
- Firefox
- The element is styled like a progress bar. Use progress-bar instead
-
-
- progressbar-vertical {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: progressbar-vertical;
--webkit-appearance: preogressbar-vertical; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- progresschunk {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: progresschunk;
--webkit-appearance: progresschunk; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- progresschunk-vertical {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: progresschunk-vertical;
--webkit-appearance: progresschunk-vertical; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- push-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- radio {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: radio;
--webkit-appearance: radio; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
- The element is drawn like a radio button, including only the actual "radio button" portion.
-
-
- radio-container {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: radio-container;
--webkit-appearance: radio-container; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button.
-
-
- radio-label {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: radio-label;
--webkit-appearance: radio-label; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- radiomenuitem {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- range {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: range;
--webkit-appearance: range; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- range-thumb {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: range-thumb;
--webkit-appearance: range-thumb; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- rating-level-indicator {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: rating-level-indicator;
--webkit-appearance: rating-level-indicator; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- resizer {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: resizer;
--webkit-appearance: resizer; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 63
-
-
- resizerpanel {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: resizerpanel;
--webkit-appearance: resizerpanel; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 63.
-
-
- scale-horizontal {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: scale-horizontal;
--webkit-appearance: scale-horizontal; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scalethumbend {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: scalethumbend;
--webkit-appearance: scalethumbend; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scalethumb-horizontal {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: scalethumb-horizontal;
--webkit-appearance: scalethumb-horizontal; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scalethumbstart {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: scalethumbstart;
--webkit-appearance: scalethumbstart; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scalethumbtick {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: scalethumbtick;
--webkit-appearance: scalethumbtick; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scalethumb-vertical {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: scalethumb-vertical;
--webkit-appearance: scalethumb-vertical; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scale-vertical {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: scale-vertical;
--webkit-appearance: scale-vertical; }
-
-
-<div>Lorem</div>
-
- Firefox
-
-
-
- scrollbarbutton-down {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 63.
-
-
- scrollbarbutton-left {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 63.
-
-
- scrollbarbutton-right {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 63.
-
-
- scrollbarbutton-up {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 63.
-
-
- scrollbarthumb-horizontal {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- scrollbarthumb-vertical {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- scrollbartrack-horizontal {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- scrollbartrack-vertical {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}}
- Firefox
-
-
-
- searchfield {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: searchfield;
--webkit-appearance: searchfield; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- searchfield-decoration {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: searchfield-decoration;
--webkit-appearance: searchfield-decoration; }
-
-
-<div>Lorem</div>
-
- Safari Edge
-
-
-
- searchfield-results-decoration {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: searchfield-results-decoration;
--webkit-appearance: searchfield-results-decoration; }
-
-
-<div>Lorem</div>
-
- Safari Edge
-
-
-
- searchfield-results-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}}
- Safari Edge
-
-
-
- searchfield-cancel-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- snapshotted-plugin-overlay {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: snapshotted-plugin-overlay;
--webkit-appearance: snapshotted-plugin-overlay; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- separator {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: separator;
--webkit-appearance: separator; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- sheet {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: sheet;
--webkit-appearance: sheet; }
-
-
-<div>Lorem</div>
-
- None
-
-
-
- slider-horizontal {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: slider-horizontal; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Edge
-
-
-
- slider-vertical {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: slider-vertical; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Edge
-
-
-
- sliderthumb-horizontal {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: slider-thumb-horizontal; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Edge
-
-
-
- sliderthumb-vertical {{Non-standard_Inline}}
-
-
-div{ color: black;
--webkit-appearance: slider-thumb-vertical; }
-
-
-<div>Lorem</div>
-
- Chrome Safari Edge
-
-
-
- spinner {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: spinner;
--webkit-appearance: spinner; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- spinner-downbutton {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- spinner-textfield {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: spinner-textfield;
--webkit-appearance: spinner-textfield; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- spinner-upbutton {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- splitter {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: splitter;
--webkit-appearance: splitter; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- square-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}}
- Chrome Safari Edge
-
-
-
- statusbar {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: statusbar;
--webkit-appearance: statusbar; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- statusbarpanel {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: statusbarpanel;
--webkit-appearance: statusbarpanel; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- tab {{Non-standard_Inline}}
-
-
-div { color: black; height: 20px;
--moz-appearance: tab;
--webkit-appearance: tab; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64
-
-
- tabpanel {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: tabpanel;
--webkit-appearance: tabpanel; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- tabpanels {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: tabpanels;
--webkit-appearance: tabpanels; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64
-
-
- tab-scroll-arrow-back {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- tab-scroll-arrow-forward {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- textarea
-
-
-div{ color: black;
--webkit-appearance: textarea; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- textfield {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: textfield;
--webkit-appearance: textfield; }
-
-
-<div>Lorem</div>
-
- Firefox Chrome Safari Edge
-
-
-
- textfield-multiline {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: textfield-multiline;
--webkit-appearance: textfield-multiline; }
-
-
-<div>Lorem</div>
-
- Firefox
- Use textarea instead
-
-
- toolbar {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- toolbarbutton {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- toolbarbutton-dropdown {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- toolbargripper {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- toolbox {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- tooltip {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- treeheader {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- treeheadercell {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- treeheadersortarrow {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- treeitem {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: treeitem;
--webkit-appearance: treeitem; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- treeline {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: treeline;
--webkit-appearance: treeline; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- treetwisty {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: treetwisty;
--webkit-appearance: treetwisty; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- treetwistyopen {{Non-standard_Inline}}
-
-
-div { color: transparent;
--moz-appearance: treetwistyopen;
--webkit-appearance: treetwistyopen; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- treeview {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: treeview;
--webkit-appearance: treeview; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- relevancy-level-indicator {{Non-standard_Inline}}
-
-
-div{ color: black;
--moz-appearance: relevancy-level-indicator;
--webkit-appearance: relevancy-level-indicator; }
-
-
-<div>Lorem</div>
-
- Safari
-
-
-
- -moz-win-borderless-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}}
-
-
-div { color: black;
--moz-appearance: -moz-win-borderless-glass; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element.
-
-
- -moz-win-browsertabbar-toolbox {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser.
-
-
- -moz-win-communicationstext {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-win-communicationstext; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -moz-win-communications-toolbox {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is -moz-win-communicationstext.
-
-
- -moz-win-exclude-glass {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}}
-
-
-div { color: black;
--moz-appearance: -moz-win-exclude-glass; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element.
-
-
- -moz-win-glass {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-win-glass; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64. This style applies the Aero Glass effect to the element.
-
-
- -moz-win-media-toolbox {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is -moz-win-mediatext.
-
-
- -moz-window-button-box {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-button-box-maximized {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-button-close {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-button-maximize {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-button-minimize {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-button-restore {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}}
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-frame-bottom {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-window-frame-bottom; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-frame-left {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-window-frame-left; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-frame-right {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-window-frame-right; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-titlebar {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-window-titlebar; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -moz-window-titlebar-maximized {{Non-standard_Inline}}
-
-
-div { color: black;
--moz-appearance: -moz-window-titlebar-maximized; }
-
-
-<div>Lorem</div>
-
- Firefox
- Removed in Firefox 64.
-
-
- -apple-pay-button {{Non-standard_Inline}}
-
- {{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}}
- Safari
- iOS and macOS only . Available on the web starting in iOS 10.1 and macOS 10.12.1
-
-
-
-Формальный синтаксис
-
-{{CSSSyntax}}
-
-Примеры
-
-Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:
-
-.exampleone {
- -moz-appearance: toolbarbutton;
-}
-
-
-Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использовать appearance: none для стилизации радио кнопок и чекбоксов.
-
-Спецификации
-
-{{Specifications}}
-
-{{CSSInfo}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/appearance/index.md b/files/ru/web/css/appearance/index.md
new file mode 100644
index 00000000000000..30f545e10df44c
--- /dev/null
+++ b/files/ru/web/css/appearance/index.md
@@ -0,0 +1,903 @@
+---
+title: appearance (-moz-appearance, -webkit-appearance)
+slug: Web/CSS/appearance
+tags:
+ - Стилизация
+ - кастомные свойства
+translation_of: Web/CSS/appearance
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+CSS-свойство **`-moz-appearance`** используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.
+
+Свойство **`-webkit-appearance`** используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают `-webkit-appearance`, для обеспечения совместимости.
+
+{{EmbedInteractiveExample("pages/css/appearance.html")}}
+
+Это свойство часто используется в таблицах стилей [XUL](/ru/docs/Mozilla/Tech/XUL/Tutorial) для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации [XBL](/ru/docs/XBL) виджетов, которые поставляются с платформой Mozilla.
+
+> **Примечание:** **Примечание о совместимости**: Если вы хотите использовать это свойство на веб-сайте, вы должны тестировать его очень осторожно. Хотя оно поддерживается в большинстве современных браузерах, его реализация широко варьируется. В старых браузерах, даже ключевое слово `none` не окажет одинакового эффекта на все элементы формы различных браузеров, а некоторые его совсем не поддерживают. Различия меньше в более современных браузерах.
+
+## Синтаксис
+
+```css
+/* CSS модуль базового интерфейса 4 уровня, значения */
+appearance: none;
+appearance: auto;
+appearance: button;
+appearance: textfield;
+appearance: searchfield;
+appearance: textarea;
+appearance: push-button;
+appearance: button-bevel;
+appearance: slider-horizontal;
+appearance: checkbox;
+appearance: radio;
+appearance: square-button;
+appearance: menulist;
+appearance: menulist-button;
+appearance: listbox;
+appearance: meter;
+appearance: progress-bar;
+
+/* Частичный список доступных значений в Gecko */
+-moz-appearance: scrollbarbutton-up;
+-moz-appearance: button-bevel;
+
+/* Частичный список доступных значений в WebKit/Blink (таких как Gecko и Edge) */
+-webkit-appearance: media-mute-button;
+-webkit-appearance: caret;
+```
+
+Свойство `-moz-appearance` может быть указано как одно значение, выбранное из списка ниже.
+
+### Значения
+
+`` является одним из нижеследующих ключевых свойств:
+
+| Value | Demo | Browser | Description |
+| ------ | ------------- | ------- | ----------- |
+| `none` | ```css hidden |
+
+div{ color: black; -moz-appearance:none; -webkit-appearance:none; appearance:none; }
+
+```````html hidden
+Lorem
+```{{EmbedLiveSample("sampleNone",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | No special styling is applied. This is the default. |
+| `auto` {{Experimental_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: auto; -webkit-appearance: auto; appearance:auto; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleAuto",100,50,"","", "nobutton")}} | None | The user agent selects the appropriate special styling based on the element. Acts as `none` on elements with no special styling. |
+| `attachment` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: attachment; -webkit-appearance: attachment; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleAttachment",100,50,"","", "nobutton")}} | Safari | |
+| `borderless-attachment` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: borderless-attachment; -webkit-appearance: borderless-attachment; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-borderless-attachment",100,50,"","","nobutton")}} | Safari | |
+| `button` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button; -webkit-appearance: button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButton",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | The element is drawn like a button. |
+| `button-arrow-down` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-arrow-down; -webkit-appearance: button-arrow-down; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonArrowDown",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `button-arrow-next` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-arrow-next; -webkit-appearance: button-arrow-next; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonArrowNext",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `button-arrow-previous` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-arrow-previous; -webkit-appearance: button-arrow-previous; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonArrowPrevious",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `button-arrow-up` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-arrow-up; -webkit-appearance: button-arrow-up; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonArrowUp",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `button-bevel` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-bevel; -webkit-appearance: button-bevel; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonBevel",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `button-focus` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: button-focus; -webkit-appearance: button-focus; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleButtonFocus",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `caps-lock-indicator` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: caps-lock-indicator; -webkit-appearance: caps-lock-indicator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-caps-lock-indicator",100,50,"","","nobutton")}} | Safari Edge | |
+| `caret` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: caret; -webkit-appearance: caret; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleCaret",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `checkbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: checkbox; -webkit-appearance: checkbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleCheckbox",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | The element is drawn like a checkbox, including only the actual "checkbox" portion. |
+| `checkbox-container` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: checkbox-container; -webkit-appearance: checkbox-container; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleCheckboxContainer",100,50,"","", "nobutton")}} | Firefox | The element is drawn like a container for a checkbox, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a checkbox. |
+| `checkbox-label` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: checkbox-label; -webkit-appearance: checkbox-label; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleCheckboxLabel",100,50,"","", "nobutton")}} | Firefox | |
+| `checkmenuitem` {{Non-standard_Inline}} | ```css hidden
+div { color: black; height: 20px; -moz-appearance: checkmenuitem; -webkit-appearance: checkmenuitem; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleCheckmenuitem",100,50,"","", "nobutton")}} | Firefox | |
+| `color-well` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: color-well; -webkit-appearance: color-well; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-color-well",100,50,"","","nobutton")}} | Safari | `input type=color` |
+| `continuous-capacity-level-indicator` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: continuous-capacity-level-indicator; -webkit-appearance: continuous-capacity-level-indicator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-continuous-capacity-level-indicator",100,50,"","","nobutton")}} | Safari | |
+| `default-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: default-button; -webkit-appearance: default-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-default-button",100,50,"","","nobutton")}} | Safari Edge | |
+| `discrete-capacity-level-indicator` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: discrete-capacity-level-indicator; -webkit-appearance: discrete-capacity-level-indicator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-discrete-capacity-level-indicator",100,50,"","","nobutton")}} | Safari | |
+| `dualbutton` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: dualbutton; -webkit-appearance: dualbutton; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleDualButton",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `groupbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: groupbox; -webkit-appearance: groupbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleGroupbox",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `inner-spin-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: inner-spin-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleInnerSpinButton",100,50,"","", "nobutton")}} | Firefox Chrome Safari | |
+| `image-controls-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: image-controls-button; -webkit-appearance: image-controls-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-image-controls-button",100,50,"","","nobutton")}} | Safari | |
+| `list-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: list-button; -webkit-appearance: list-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-list-button",100,50,"","","nobutton")}} | Safari | datalist |
+| `listbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; height:20px; -moz-appearance: listbox; -webkit-appearance: listbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleListBox",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `listitem` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: listitem; -webkit-appearance: listitem; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleListItem",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `media-enter-fullscreen-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-enter-fullscreen-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaEnterFullscreenButton",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-exit-fullscreen-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-exit-fullscreen-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaExitFullscreenButton",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-fullscreen-volume-slider` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-fullscreen-volume-slider; -webkit-appearance: media-fullscreen-volume-slider; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-fullscreen-volume-slider",100,50,"","","nobutton")}} | Safari | |
+| `media-fullscreen-volume-slider-thumb` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-fullscreen-volume-slider-thumb; -webkit-appearance: media-fullscreen-volume-slider-thumb; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-fullscreen-volume-slider-thumb",100,50,"","","nobutton")}} | Safari | |
+| `media-mute-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-mute-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaMuteButton",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `media-play-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-play-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaPlayButton",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `media-overlay-play-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-overlay-play-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaOverlayPlayButton",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-return-to-realtime-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-return-to-realtime-button; -webkit-appearance: media-return-to-realtime-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-return-to-realtime-button",100,50,"","","nobutton")}} | Safari | |
+| `media-rewind-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-rewind-button; -webkit-appearance: media-rewind-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-rewind-button",100,50,"","","nobutton")}} | Safari | |
+| `media-seek-back-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-seek-back-button; -webkit-appearance: media-seek-back-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-seek-back-button",100,50,"","","nobutton")}} | Safari Edge | |
+| `media-seek-forward-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-seek-forward-button; -webkit-appearance: media-seek-forward-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-seek-forward-button",100,50,"","","nobutton")}} | Safari Edge | |
+| `media-toggle-closed-captions-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-toggle-closed-captions-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaToggleClosedCaptionsButton",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-slider` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-slider; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaSlider",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `media-sliderthumb` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-sliderthumb; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaSliderThumb",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `media-volume-slider-container` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-volume-slider-container; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaVolumeSliderContainer",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-volume-slider-mute-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-volume-slider-mute-button; -webkit-appearance: media-volume-slider-mute-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-volume-slider-mute-button",100,50,"","","nobutton")}} | Safari | |
+| `media-volume-slider` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-volume-slider; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaVolumeSlider",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-volume-sliderthumb` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-volume-slider-thumb; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaVolumeSliderThumb",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-controls-background` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-controls-background; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaControlsBackground",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-controls-dark-bar-background` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-controls-dark-bar-background; -webkit-appearance: media-controls-dark-bar-background; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-controls-dark-bar-background",100,50,"","","nobutton")}} | Safari | |
+| `media-controls-fullscreen-background` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-controls-fullscreen-background; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaControlsFullscreenBackground",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-controls-light-bar-background` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: media-controls-light-bar-background; -webkit-appearance: media-controls-light-bar-background; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-media-controls-light-bar-background",100,50,"","","nobutton")}} | Safari | |
+| `media-current-time-display` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-current-time-display; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaCurrentTimeDisplay",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `media-time-remaining-display` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: media-time-remaining-display; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMediaTimeRemainingDisplay",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `menuarrow` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menuarrow; -webkit-appearance: menuarrow; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuArrow",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menubar` {{Non-standard_Inline}} | ```css hidden
+div { color: balck; -moz-appearance: menubar; -webkit-appearance: menubar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenubar",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menucheckbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menucheckbox; -webkit-appearance: menucheckbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuCheckbox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menuimage` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menuimage; -webkit-appearance: menuimage; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuImage",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menuitem` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menuitem; -webkit-appearance: menuitem; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuItem",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64, the element was styled as menu item, item is highlighted when hovered. |
+| `menuitemtext` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menuitemtext; -webkit-appearance: menuitemtext; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuItemText",100,50,"","", "nobutton")}} | Firefox | Removed in FF 64 |
+| `menulist` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menulist; -webkit-appearance: menulist; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuList",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `menulist-button` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menulist-button; -webkit-appearance: menulist-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuListButton",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | The element is styled as a button that would indicate a menulist can be opened. |
+| `menulist-text` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menulist-text; -webkit-appearance: menulist-text; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuListText",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `menulist-textfield` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menulist-textfield; -webkit-appearance: menulist-textfield; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuListTextfield",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
+| `menupopup` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menupopup; -webkit-appearance: menupopup; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuPopup",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menuradio` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: menuradio; -webkit-appearance: menuradio; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuRadio",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `menuseparator` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: menuseparator; -webkit-appearance: menuseparator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMenuSeparator",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `meter` | ```css hidden
+div{ color: black; -webkit-appearance: meter; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMeter",100,50,"","", "nobutton")}} | Chrome Safari Firefox | New in Fx 64 |
+| `meterbar` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: meterbar; -webkit-appearance: meterbar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMeterbar",100,50,"","", "nobutton")}} | Firefox | New in Fx 16. Use `meter` instead |
+| `meterchunk` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: meterchunk; -webkit-appearance: meterchunk; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleMeterchunk",100,50,"","", "nobutton")}} | Firefox | New in Fx 16. Removed in Firefox 64. |
+| `number-input` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: number-input; -webkit-appearance: number-input; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleNumberInput",100,50,"","", "nobutton")}} | Firefox | |
+| `progress-bar` | ```css hidden
+div{ color: black; -webkit-appearance: progress-bar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressBarWebkit",100,50,"","", "nobutton")}} | Chrome Safari Firefox | New in Fx 64 |
+| `progress-bar-value` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: progress-bar-value; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressBarValueWebkit",100,50,"","", "nobutton")}} | Chrome Safari | |
+| `progressbar` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: progressbar; -webkit-appearance: progressbar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressBar",100,50,"","", "nobutton")}} | Firefox | The element is styled like a progress bar. Use `progress-bar` instead |
+| `progressbar-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: progressbar-vertical; -webkit-appearance: preogressbar-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressBarVertical",100,50,"","", "nobutton")}} | Firefox | |
+| `progresschunk` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: progresschunk; -webkit-appearance: progresschunk; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressChunk",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `progresschunk-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: progresschunk-vertical; -webkit-appearance: progresschunk-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleProgressChunkVertical",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `push-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: push-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("samplePushButton",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `radio` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: radio; -webkit-appearance: radio; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRadio",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | The element is drawn like a radio button, including only the actual "radio button" portion. |
+| `radio-container` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: radio-container; -webkit-appearance: radio-container; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRadioContainer",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64, the element is drawn like a container for a radio button, which may include a prelighting background effect under certain platforms. Normally it would contain a label and a radio button. |
+| `radio-label` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: radio-label; -webkit-appearance: radio-label; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRadioLabel",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `radiomenuitem` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: radiomenuitem; -webkit-appearance: radiomenuitem; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRadioMenuItem",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `range` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: range; -webkit-appearance: range; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRange",100,50,"","", "nobutton")}} | Firefox | |
+| `range-thumb` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: range-thumb; -webkit-appearance: range-thumb; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleRangeThumb",100,50,"","", "nobutton")}} | Firefox | |
+| `rating-level-indicator` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: rating-level-indicator; -webkit-appearance: rating-level-indicator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-rating-level-indicator",100,50,"","","nobutton")}} | Safari | |
+| `resizer` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: resizer; -webkit-appearance: resizer; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleResizer",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63 |
+| `resizerpanel` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: resizerpanel; -webkit-appearance: resizerpanel; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleResizerPanel",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63. |
+| `scale-horizontal` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: scale-horizontal; -webkit-appearance: scale-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleHorizontal",100,50,"","", "nobutton")}} | Firefox | |
+| `scalethumbend` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scalethumbend; -webkit-appearance: scalethumbend; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleThumbEnd",100,50,"","", "nobutton")}} | Firefox | |
+| `scalethumb-horizontal` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: scalethumb-horizontal; -webkit-appearance: scalethumb-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleThumbHorizontal",100,50,"","", "nobutton")}} | Firefox | |
+| `scalethumbstart` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scalethumbstart; -webkit-appearance: scalethumbstart; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleThumbStart",100,50,"","", "nobutton")}} | Firefox | |
+| `scalethumbtick` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scalethumbtick; -webkit-appearance: scalethumbtick; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleThumbTick",100,50,"","", "nobutton")}} | Firefox | |
+| `scalethumb-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scalethumb-vertical; -webkit-appearance: scalethumb-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleThumbVertical",100,50,"","", "nobutton")}} | Firefox | |
+| `scale-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: scale-vertical; -webkit-appearance: scale-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScaleVertical",100,50,"","", "nobutton")}} | Firefox | |
+| `scrollbarbutton-down` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarbutton-down; -webkit-appearance: scrollbarbutton-down; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarButtonDown",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63. |
+| `scrollbarbutton-left` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarbutton-left; -webkit-appearance: scrollbarbutton-left; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarButtonLeft",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63. |
+| `scrollbarbutton-right` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarbutton-right; -webkit-appearance: scrollbarbutton-right; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarButtonRight",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63. |
+| `scrollbarbutton-up` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarbutton-up; -webkit-appearance: scrollbarbutton-up; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarButtonUp",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 63. |
+| `scrollbarthumb-horizontal` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarthumb-horizontal; -webkit-appearance: scrollbarthumb-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarThumbHorizontal",100,50,"","", "nobutton")}} | Firefox | |
+| `scrollbarthumb-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbarthumb-vertical; -webkit-appearance: scrollbarthumb-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarThumbVertical",100,50,"","", "nobutton")}} | Firefox | |
+| `scrollbartrack-horizontal` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbartrack-horizontal; -webkit-appearance: scrollbartrack-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarTrackHorizontal",100,50,"","", "nobutton")}} | Firefox | |
+| `scrollbartrack-vertical` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleScrollbarTrackVertical",100,50,"","", "nobutton")}} | Firefox | |
+| `searchfield` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: searchfield; -webkit-appearance: searchfield; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSearchField",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `searchfield-decoration` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-searchfield-decoration",100,50,"","","nobutton")}} | Safari Edge | |
+| `searchfield-results-decoration` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: searchfield-results-decoration; -webkit-appearance: searchfield-results-decoration; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-searchfield-results-decoration",100,50,"","","nobutton")}} | Safari Edge | |
+| `searchfield-results-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: searchfield-results-button; -webkit-appearance: searchfield-results-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-searchfield-results-button",100,50,"","","nobutton")}} | Safari Edge | |
+| `searchfield-cancel-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: searchfield-cancel-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSearchFieldCancelButton",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `snapshotted-plugin-overlay` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: snapshotted-plugin-overlay; -webkit-appearance: snapshotted-plugin-overlay; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-snapshotted-plugin-overlay",100,50,"","","nobutton")}} | Safari | |
+| `separator` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: separator; -webkit-appearance: separator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSeparator",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `sheet` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: sheet; -webkit-appearance: sheet; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSheet",100,50,"","", "nobutton")}} | None | |
+| `slider-horizontal` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: slider-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSliderHorizontal",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `slider-vertical` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: slider-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSliderVertical",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `sliderthumb-horizontal` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: slider-thumb-horizontal; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSliderThumbHorizontal",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `sliderthumb-vertical` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: slider-thumb-vertical; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSliderThumbVertical",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `spinner` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: spinner; -webkit-appearance: spinner; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSpinner",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `spinner-downbutton` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: spinner-downbutton; -webkit-appearance: spinner-downbutton; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSpinnerDownbutton",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `spinner-textfield` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: spinner-textfield; -webkit-appearance: spinner-textfield; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSpinnerTextfield",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `spinner-upbutton` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: spinner-upbutton; -webkit-appearance: spinner-upbutton; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSpinnerUpbutton",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `splitter` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: splitter; -webkit-appearance: splitter; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSplitter",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `square-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: square-button; -webkit-appearance: square-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleSquareButton",100,50,"","", "nobutton")}} | Chrome Safari Edge | |
+| `statusbar` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: statusbar; -webkit-appearance: statusbar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleStatusBar",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `statusbarpanel` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: statusbarpanel; -webkit-appearance: statusbarpanel; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleStatusBarPanel",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `tab` {{Non-standard_Inline}} | ```css hidden
+div { color: black; height: 20px; -moz-appearance: tab; -webkit-appearance: tab; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTab",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `tabpanel` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: tabpanel; -webkit-appearance: tabpanel; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTabPanel",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `tabpanels` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: tabpanels; -webkit-appearance: tabpanels; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTabPanels",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64 |
+| `tab-scroll-arrow-back` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: tab-scroll-arrow-back; -webkit-appearance: tab-scroll-arrow-back; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTabScrollArrowBack",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `tab-scroll-arrow-forward` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: tab-scroll-arrow-forward; -webkit-appearance: tab-scroll-arrow-forward; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTabScrollArrowForward",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `textarea` | ```css hidden
+div{ color: black; -webkit-appearance: textarea; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTextArea",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `textfield` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: textfield; -webkit-appearance: textfield; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTextField",100,50,"","", "nobutton")}} | Firefox Chrome Safari Edge | |
+| `textfield-multiline` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: textfield-multiline; -webkit-appearance: textfield-multiline; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTextfieldMultiline",100,50,"","", "nobutton")}} | Firefox | Use `textarea` instead |
+| `toolbar` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: toolbar; -webkit-appearance: toolbar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleToolbar",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `toolbarbutton` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: toolbarbutton; -webkit-appearance: toolbarbutton; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleToolbarButton",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `toolbarbutton-dropdown` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: toolbarbutton-dropdown; -webkit-appearance: toolbarbutton-dropdown; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleToolbarButtonDropdown",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `toolbargripper` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: toolbargripper; -webkit-appearance: toolbargripper; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleToolbarGripper",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `toolbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: toolbox; -webkit-appearance: toolbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleToolbox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `tooltip` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: tooltip; -webkit-appearance: tooltip; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTooltip",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeheader` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: treeheader; -webkit-appearance: treeheader; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeHeader",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeheadercell` {{Non-standard_Inline}} | ```css hidden
+div { color: black; height:20px; -moz-appearance: treeheadercell; -webkit-appearance: treeheadercell; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeHeaderCell",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeheadersortarrow` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: treeheadersortarrow; -webkit-appearance: treeheadersortarrow; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeHeaderSortArrow",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeitem` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: treeitem; -webkit-appearance: treeitem; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeItem",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeline` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: treeline; -webkit-appearance: treeline; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeLine",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treetwisty` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: treetwisty; -webkit-appearance: treetwisty; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeTwisty",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treetwistyopen` {{Non-standard_Inline}} | ```css hidden
+div { color: transparent; -moz-appearance: treetwistyopen; -webkit-appearance: treetwistyopen; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeTwistyOpen",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `treeview` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: treeview; -webkit-appearance: treeview; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleTreeView",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `relevancy-level-indicator` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -moz-appearance: relevancy-level-indicator; -webkit-appearance: relevancy-level-indicator; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sample-relevancy-level-indicator",100,50,"","","nobutton")}} | Safari | |
+| `-moz-win-borderless-glass` {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("2.0")}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-borderless-glass; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinBorderlessGlass",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This style applies the Aero Glass effect -- but without a border -- to the element. |
+| `-moz-win-browsertabbar-toolbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-browsertabbar-toolbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinBrowsertabbarToolbox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This toolbox style is meant to be used for the tab bar in a browser. |
+| `-moz-win-communicationstext` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-communicationstext; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinCommunicationstext",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-win-communications-toolbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-communications-toolbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinCommunicationsToolbox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This toolbox style is meant to be used in communications and productivity applications. Corresponding foreground color is `-moz-win-communicationstext`. |
+| `-moz-win-exclude-glass` {{Non-standard_Inline}}{{Gecko_MinVersion_Inline("6.0")}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-exclude-glass; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinExcludeGlass",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This styles is used to exclude the Aero Glass effect on the element. |
+| `-moz-win-glass` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-glass; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinGlass",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This style applies the Aero Glass effect to the element. |
+| `-moz-win-media-toolbox` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-win-media-toolbox; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWinMediaToolbox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. This toolbox style is meant to be used in applications that manage media objects. Corresponding foreground color is `-moz-win-mediatext`. |
+| `-moz-window-button-box` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-box; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonBox",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-button-box-maximized` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-box-maximized; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonBoxMaximized",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-button-close` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-close; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonClose",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-button-maximize` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-maximize; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonMaximize",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-button-minimize` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-minimize; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonMinimize",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-button-restore` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-button-restore; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowButtonRestore",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-frame-bottom` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-frame-bottom; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowFrameBottom",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-frame-left` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-frame-left; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowFrameLeft",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-frame-right` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-frame-right; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowFrameRight",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-titlebar` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-titlebar; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowTitlebar",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-moz-window-titlebar-maximized` {{Non-standard_Inline}} | ```css hidden
+div { color: black; -moz-appearance: -moz-window-titlebar-maximized; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleWindowTitlebarMaximized",100,50,"","", "nobutton")}} | Firefox | Removed in Firefox 64. |
+| `-apple-pay-button` {{Non-standard_Inline}} | ```css hidden
+div{ color: black; -webkit-appearance: -apple-pay-button; }
+``````html hidden
+Lorem
+```{{EmbedLiveSample("sampleApplePayButton",100,50,"","", "nobutton")}} | Safari | **iOS and macOS only**. Available on the web starting in iOS 10.1 and macOS 10.12.1 |
+
+### Формальный синтаксис
+
+{{CSSSyntax}}
+
+## Примеры
+
+Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:
+
+```css
+.exampleone {
+ -moz-appearance: toolbarbutton;
+}
+```
+
+Смотрите также [this JSFiddle](http://jsfiddle.net/go392m5s/) в качестве примера, показывающего как вы можете использовать `appearance: none` для стилизации радио кнопок и чекбоксов.
+
+## Спецификации
+
+{{Specifications}}
+
+{{CSSInfo}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+* [Definition of `appearance` in CSS 3 Basic User Interface](http://www.w3.org/TR/2004/CR-css3-ui-20040511/#appearance) (Candidate Recommendation from 2004-05-11).
+* [Dropped CSS3 features from the UI spec.4](http://wiki.csswg.org/spec/css4-ui#dropped-css3-features)
+```````
diff --git a/files/ru/web/css/at-rule/index.html b/files/ru/web/css/at-rule/index.html
deleted file mode 100644
index 3a9856b32aacde..00000000000000
--- a/files/ru/web/css/at-rule/index.html
+++ /dev/null
@@ -1,76 +0,0 @@
----
-title: At-rules
-slug: Web/CSS/At-rule
-translation_of: Web/CSS/At-rule
----
-{{cssref}}
-
-At-rules это CSS операторы , которые показывают CSS как себя вести. Они начинаются со знака at, '@' (U+0040 КОММЕРЧЕСКОЕ AT), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, ';' (U+003B ТОЧКА С ЗАПЯТОЙ), или до следующего CSS блока , в зависимости от того, что наступит раньше.
-
-/* Общая структура */
-@ИДЕНТИФИКАТОР (ПРАВИЛО);
-
-/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
-@charset "utf-8";
-
-Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:
-
-
- {{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.
- {{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.
- {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.
- Вложенные at-правила
- {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.
- {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
- {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
- {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.
- {{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.
- {{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.
- {{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)
- {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.
- {{cssxref("@font-feature-values")}} (плюс @swash, @ornaments, @annotation, @stylistic, @styleset и @character-variant)(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)
-
-
-
-Условные групповые правила Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в CSS Conditionals Level 3 и в:
-
-
- {{cssxref("@media")}},
- {{cssxref("@supports")}},
- {{cssxref("@document")}}. (deferred to Level 4 of CSS Spec)
-
-
-Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределённое количество вложений.
-
-Характеристики
-
-
-
-
- Specification
- Status
- Comment
-
-
- {{SpecName('CSS3 Conditional')}}
- {{Spec2('CSS3 Conditional')}}
- Начальное определение
-
-
- {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}}
- {{Spec2('Compat')}}
- Стандартизирует @-webkit-keyframes.
-
-
-
-
-Читайте также
-
-
diff --git a/files/ru/web/css/at-rule/index.md b/files/ru/web/css/at-rule/index.md
new file mode 100644
index 00000000000000..8c2732f72e67c6
--- /dev/null
+++ b/files/ru/web/css/at-rule/index.md
@@ -0,0 +1,55 @@
+---
+title: At-rules
+slug: Web/CSS/At-rule
+translation_of: Web/CSS/At-rule
+---
+{{cssref}}
+
+**At-rules** это [CSS операторы](/ru/docs/Web/CSS/Синтаксис#CSS_statements), которые показывают CSS как себя вести. Они начинаются со знака at, '`@`' (`U+0040 КОММЕРЧЕСКОЕ AT`), сопровождается идентификатором, и включает в себя всё до следующей точки с запятой, '`;`' (`U+003B ТОЧКА С ЗАПЯТОЙ`), или до следующего [CSS блока](/ru/docs/Web/CSS/Синтаксис#Блоки_объявлений_CSS), в зависимости от того, что наступит раньше.
+
+```css
+/* Общая структура */
+@ИДЕНТИФИКАТОР (ПРАВИЛО);
+
+/* Пример: говорит браузеру использовать UTF-8 кодировку символов */
+@charset "utf-8";
+```
+
+Существует несколько at-правил, обозначаемые идентификаторами, каждое из которых имеет свой синтаксис:
+
+- {{cssxref("@charset")}} — Определяет кодировку символов, используемый таблицей стилей.
+- {{cssxref("@import")}} — Сообщает движку CSS включить внешнюю таблицу стилей.
+- {{cssxref("@namespace")}} — Сообщает механизму CSS, что все его содержимое должно рассматриваться с приставкой пространства имён XML.
+- **_Вложенные at-правила_** — Подмножество вложенных операторов, которые могут использоваться как оператор таблицы стилей, а также внутри правил условной группы.
+
+ - {{cssxref("@media")}} — Условное групповое правило, которое будет применять его содержимое, если устройство соответствует критериям условия, определённого с помощью медиавыражения.
+ - {{cssxref("@supports")}} — Условное групповое правило, которое будет применять его содержимое, если браузер соответствует критериям данного условия.
+ - {{cssxref("@document")}} {{experimental_inline}} — Условное групповое правило, которое будет применять его содержимое, если документ, в котором применяется таблица стилей, соответствует критериям данного условия.
+ - {{cssxref("@page")}} — Описывает аспект изменений макета, который будет применён при печати документа.
+ - {{cssxref("@font-face")}} — Описывает аспект внешнего шрифта для загрузки.
+ - {{cssxref("@keyframes")}} — Описывает аспект промежуточных шагов в последовательности анимации CSS.
+ - {{cssxref("@viewport")}} {{experimental_inline}} — Описывает аспекты области просмотра для устройств с маленьким экраном. (в настоящее время на стадии разработки проекта)
+ - {{cssxref("@counter-style")}} — Определяет конкретные counter-styles, которые не являются частью предопределённого набора стилей.
+ - {{cssxref("@font-feature-values")}} (плюс `@swash`, `@ornaments`, `@annotation`, `@stylistic`, `@styleset` и `@character-variant`)
+ — Определите общие имена в {{cssxref("font-option-alternates")}} для функции, которая по-разному активируется в OpenType _(at the Candidate Recommendation stage, but only implemented in Gecko as of writing)_
+
+## Условные групповые правила
+
+Как и значения свойств, каждое at-правило имеет свой синтаксис. Тем не менее, некоторые из них могут быть сгруппированы в специальную категорию, называемую Условные групповые правила. Эти операторы имеют общий синтаксис, и каждый из них может включать вложенные операторы - либо наборы правил, либо вложенные правила. Кроме того, все они передают общее семантическое значение - все они связывают некоторый тип условия, которое в любой момент оценивается как истинное или ложное. Если условие оценивается как истинное, то будут применяться все операторы в группе. Условные групповые правила описываются в [CSS Conditionals Level 3](http://dev.w3.org/csswg/css3-conditional/) и в:
+
+- {{cssxref("@media")}},
+- {{cssxref("@supports")}},
+- {{cssxref("@document")}}. _(deferred to Level 4 of CSS Spec)_
+
+Поскольку каждая условная группа может также содержать вложенные операторы, может быть неопределённое количество вложений.
+
+## Характеристики
+
+| Specification | Status | Comment |
+| ------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------- |
+| {{SpecName('CSS3 Conditional')}} | {{Spec2('CSS3 Conditional')}} | Начальное определение |
+| {{SpecName('Compat', '#css-at-rules', 'CSS At-rules')}} | {{Spec2('Compat')}} | Стандартизирует `@-webkit-keyframes`. |
+
+## Читайте также
+
+- {{CSS_key_concepts}}
diff --git a/files/ru/web/css/attr/index.html b/files/ru/web/css/attr/index.html
deleted file mode 100644
index c177264d619b39..00000000000000
--- a/files/ru/web/css/attr/index.html
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: attr
-slug: Web/CSS/attr
-translation_of: Web/CSS/attr()
-original_slug: Web/CSS/attr()
----
-{{CSSRef}}
-
-Описание
-
-С помощью функции CSS attr() можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент .
-
-Функцию attr() можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.
-
-Синтаксис
-
-/* Пример простого использования */
-attr(data-count);
-attr(title);
-
-/* С типом */
-attr(src url);
-attr(data-count number);
-attr(data-width px);
-
-/* с фоллбэком */
-attr(data-count number, 0);
-attr(src url, '');
-attr(data-width px, inherit);
-attr(data-something, 'default');
-
-
-Значения
-
-
- attribute-nameНазвание атрибута элемента HTML, на который ссылаемся в CSS.
- <type-or-unit> {{Experimental_Inline}}Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование <type-or-unit> в качестве значения для данного атрибута недопустимо, выражение attr() также будет недопустимым. Если этот параметр опущен, по умолчанию используется string . Список допустимых значений:
-
-
-
- Ключевое слово
- Тип
- Комментарий
- Значение по умолчанию
-
-
-
-
- string{{cssxref("<string>")}}
- The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters.
- An empty string
-
-
- color {{experimental_inline}}{{cssxref("<color>")}}
- The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value.
- currentColor
-
- url {{experimental_inline}}{{cssxref("<url>")}}
- The attribute value is parsed as a string that is used inside a CSS url()function.
- The url about:invalid that points to a non-existent document with a generic error condition.
-
-
- integer {{experimental_inline}}{{cssxref("<integer>")}}
- The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used.
- 0, or, if 0 is not a valid value for the property, the property's minimum value.
-
- number {{experimental_inline}}{{cssxref("<number>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- 0, or, if 0 is not a valid value for the property, the property's minimum value.
-
- length {{experimental_inline}}{{cssxref("<length>")}}
- The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. 12.5em). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used.attr()computes it to an absolute length.
- 0, or, if 0 is not a valid value for the property, the property's minimum value.
-
- em, ex, px, rem, vw, vh, vmin, vmax, mm, cm, in, pt, or pc {{experimental_inline}}{{cssxref("<length>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.attr()computes it to an absolute length.
- 0, or, if 0 is not a valid value for the property, the property's minimum value.
-
- angle {{experimental_inline}}{{cssxref("<angle>")}}
- The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. 30.5deg). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used.
- 0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
-
- deg, grad, rad {{experimental_inline}}{{cssxref("<angle>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- 0deg, or, if 0deg is not a valid value for the property, the property's minimum value.
-
- time {{experimental_inline}}{{cssxref("<time>")}}
- The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. 30.5ms). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used.
- 0s, or, if 0s is not a valid value for the property, the property's minimum value.
-
- s, ms {{experimental_inline}}{{cssxref("<time>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- 0s, or, if 0s is not a valid value for the property, the property's minimum value.
-
- frequency {{experimental_inline}}{{cssxref("<frequency>")}}
- The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. 30.5kHz). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.
- 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
-
- Hz, kHz {{experimental_inline}}{{cssxref("<frequency>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.
- 0Hz, or, if 0Hz is not a valid value for the property, the property's minimum value.
-
- % {{experimental_inline}}{{cssxref("<percentage>")}}
- The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. 12.5), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used.attr()computes it to an absolute length.
- 0%, or, if 0% is not a valid value for the property, the property's minimum value.
-
-
- <fallback> {{experimental_inline}}The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where attr() is used, even if it is not used, and must not contain another attr() expression. If attr() is not the sole component value of a property, its <fallback> value must be of the type defined by <type-or-unit>. If not set, CSS will use the default value defined for each <type-or-unit>.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-p::before {
- content: attr(data-foo) " ";
-}
-
-
-<p data-foo="hello">world</p>
-
-
-Результат
-
-{{EmbedLiveSample("Пример", '100%', '80')}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/attr/index.md b/files/ru/web/css/attr/index.md
new file mode 100644
index 00000000000000..5fc2c7a020e55f
--- /dev/null
+++ b/files/ru/web/css/attr/index.md
@@ -0,0 +1,84 @@
+---
+title: attr
+slug: Web/CSS/attr
+translation_of: Web/CSS/attr()
+original_slug: Web/CSS/attr()
+---
+{{CSSRef}}
+
+## Описание
+
+С помощью функции [CSS](/ru/docs/Web/CSS) `attr()` можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется [псевдо-элемент](/ru/docs/Web/CSS/Pseudo-elements).
+
+Функцию `attr()` можно использовать с любым свойством CSS, но поддержка иных свойств, кроме {{cssxref("content")}}, является экспериментальной.
+
+## Синтаксис
+
+```js
+/* Пример простого использования */
+attr(data-count);
+attr(title);
+
+/* С типом */
+attr(src url);
+attr(data-count number);
+attr(data-width px);
+
+/* с фоллбэком */
+attr(data-count number, 0);
+attr(src url, '');
+attr(data-width px, inherit);
+attr(data-something, 'default');
+```
+
+### Значения
+
+- `attribute-name`
+ - : Название атрибута элемента HTML, на который ссылаемся в CSS.
+- `` {{Experimental_Inline}}
+ - | : Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование `` в качестве значения для данного атрибута недопустимо, выражение `attr()` также будет недопустимым. Если этот параметр опущен, по умолчанию используется `string` . Список допустимых значений: | Ключевое слово | Тип | Комментарий | Значение по умолчанию |
+ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------- | --------------------- |
+ | `string` | {{cssxref("<string>")}} | The attribute value is treated as a CSS {{cssxref("<string>")}}. It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different characters. | An empty string |
+ | `color` {{experimental_inline}} | {{cssxref("<color>")}} | The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS {{cssxref("<string>")}} value. Leading and trailing spaces are stripped. | `currentColor` |
+ | `url` {{experimental_inline}} | {{cssxref("<url>")}} | The attribute value is parsed as a string that is used inside a CSS `url()`function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped. | The url `about:invalid` that points to a non-existent document with a generic error condition. |
+ | `integer` {{experimental_inline}} | {{cssxref("<integer>")}} | The attribute value is parsed as a CSS {{cssxref("<integer>")}}. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
+ | `number` {{experimental_inline}} | {{cssxref("<number>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
+ | `length` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<length>")}} dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
+ | `em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc` {{experimental_inline}} | {{cssxref("<length>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<length>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0`, or, if `0` is not a valid value for the property, the property's minimum value. |
+ | `angle` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<angle>")}} dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
+ | `deg`, `grad`, `rad` {{experimental_inline}} | {{cssxref("<angle>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an {{cssxref("<angle>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value. |
+ | `time` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<time>")}} dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
+ | `s`, `ms` {{experimental_inline}} | {{cssxref("<time>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as an{{cssxref("<time>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0s`, or, if `0s` is not a valid value for the property, the property's minimum value. |
+ | `frequency` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<frequency>")}} dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
+ | `Hz`, `kHz` {{experimental_inline}} | {{cssxref("<frequency>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<frequency>")}} with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped. | `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value. |
+ | `%` {{experimental_inline}} | {{cssxref("<percentage>")}} | The attribute value is parsed as a CSS {{cssxref("<number>")}}, that is without the unit (e.g. `12.5`), and interpreted as a {{cssxref("<percentage>")}}. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()`computes it to an absolute length. Leading and trailing spaces are stripped. | `0%`, or, if `0%` is not a valid value for the property, the property's minimum value. |
+- `` {{experimental_inline}}
+ - : The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where `attr()` is used, even if it is not used, and must not contain another `attr()` expression. If `attr()` is not the sole component value of a property, its `` value must be of the type defined by ``. If not set, CSS will use the default value defined for each ``.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+```css
+p::before {
+ content: attr(data-foo) " ";
+}
+```
+
+```html
+world
+```
+
+### Результат
+
+{{EmbedLiveSample("Пример", '100%', '80')}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/attribute_selectors/index.html b/files/ru/web/css/attribute_selectors/index.html
deleted file mode 100644
index 4aa4d4ddbeb152..00000000000000
--- a/files/ru/web/css/attribute_selectors/index.html
+++ /dev/null
@@ -1,86 +0,0 @@
----
-title: Селекторы атрибутов
-slug: Web/CSS/Attribute_selectors
-translation_of: Web/CSS/Attribute_selectors
----
-{{CSSRef("Selectors")}}
-
-Обзор
-
-Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.
-
-
- [attr ]Обозначает элемент с атрибутом по имени attr.
- [attr =value ]Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.
- [attr ~=value ]Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value
- [attr |=value ]Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.
- [attr ^=value ]Обозначает элемент с именем атрибута attr значение которого начинается с "value"
- [attr $=value ]Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"
- [attr *=value ]Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.
-
-
-Пример
-
-/* Все span с атрибутом "lang" будут жирными */
-span[lang] {font-weight:bold;}
-
-/* Все span в Португалии будут зелёными */
-span[lang="pt"] {color:green;}
-
-/* Все span с американским английским будут синими */
-span[lang~="en-us"] {color: blue;}
-
-/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */
-span[lang|="zh"] {color: red;}
-
-/* Все внутренние ссылки будут иметь золотой фон */
-a[href^="#"] {background-color:gold}
-
-/* Все ссылки с url заканчивающимся на .cn будут красными */
-a[href$=".cn"] {color: red;}
-
-/* Все ссылки содержащие "example" в url будут иметь серый фон */
-a[href*="example"] {background-color: #CCCCCC;}
-
-
-<div class="hello-example">
- <a href="http://example.com">English:</a>
- <span lang="en-us en-gb en-au en-nz">Hello World!</span>
-</div>
-<div class="hello-example">
- <a href="#portuguese">Portuguese:</a>
- <span lang="pt">Olá Mundo!</span>
-</div>
-<div class="hello-example">
- <a href="http://example.cn">Chinese (Simplified):</a>
- <span lang="zh-CN">世界您好！</span>
-</div>
-<div class="hello-example">
- <a href="http://example.cn">Chinese (Traditional):</a>
- <span lang="zh-TW">世界您好！</span>
-</div>
-
-
-{{ EmbedLiveSample('Example', 250, 100) }}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/attribute_selectors/index.md b/files/ru/web/css/attribute_selectors/index.md
new file mode 100644
index 00000000000000..38740a410fd57c
--- /dev/null
+++ b/files/ru/web/css/attribute_selectors/index.md
@@ -0,0 +1,84 @@
+---
+title: Селекторы атрибутов
+slug: Web/CSS/Attribute_selectors
+translation_of: Web/CSS/Attribute_selectors
+---
+{{CSSRef("Selectors")}}
+
+## Обзор
+
+Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.
+
+- `[attr]`
+ - : Обозначает элемент с атрибутом по имени attr.
+- `[attr=value]`
+ - : Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.
+- `[attr~=value]`
+ - : Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value
+- `[attr|=value]`
+ - : Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.
+- `[attr^=value]`
+ - : Обозначает элемент с именем атрибута attr значение которого начинается с "value"
+- `[attr$=value]`
+ - : Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"
+- `[attr*=value]`
+ - : Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.
+
+## Пример
+
+```css
+/* Все span с атрибутом "lang" будут жирными */
+span[lang] {font-weight:bold;}
+
+/* Все span в Португалии будут зелёными */
+span[lang="pt"] {color:green;}
+
+/* Все span с американским английским будут синими */
+span[lang~="en-us"] {color: blue;}
+
+/* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) */
+span[lang|="zh"] {color: red;}
+
+/* Все внутренние ссылки будут иметь золотой фон */
+a[href^="#"] {background-color:gold}
+
+/* Все ссылки с url заканчивающимся на .cn будут красными */
+a[href$=".cn"] {color: red;}
+
+/* Все ссылки содержащие "example" в url будут иметь серый фон */
+a[href*="example"] {background-color: #CCCCCC;}
+```
+
+```html
+
+
+
+
+```
+
+{{ EmbedLiveSample('Example', 250, 100) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [CSS селекторы: базовая поддержка браузерами](http://dev.l-c-n.com/CSS3-selectors/browser-support.php)
+- [Совместимость с браузерами селекторов и псевдо-селекторов CSS](http://kimblim.dk/css-tests/selectors/)
diff --git a/files/ru/web/css/backdrop-filter/index.html b/files/ru/web/css/backdrop-filter/index.html
deleted file mode 100644
index 553c9900e380d3..00000000000000
--- a/files/ru/web/css/backdrop-filter/index.html
+++ /dev/null
@@ -1,115 +0,0 @@
----
-title: backdrop-filter
-slug: Web/CSS/backdrop-filter
-translation_of: Web/CSS/backdrop-filter
----
-{{CSSRef}}{{SeeCompatTable}}
-
-CSS свойство backdrop-filterза элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.
-
-
-backdrop-filter : none;
-
-
-backdrop-filter : url(commonfilters.svg#filter) ;
-
-
-backdrop-filter : blur ( 2 px ) ;
-backdrop-filter : brightness ( 60 % ) ;
-backdrop-filter : contrast ( 40 % ) ;
-backdrop-filter : drop-shadow ( 4 px 4 px 10 px blue) ;
-backdrop-filter : grayscale ( 30 % ) ;
-backdrop-filter : hue-rotate ( 120 deg ) ;
-backdrop-filter : invert ( 70 % ) ;
-backdrop-filter : opacity ( 20 % ) ;
-backdrop-filter : sepia ( 90 % ) ;
-backdrop-filter : saturate ( 80 % ) ;
-
-
-backdrop-filter : url(filters.svg#filter) blur ( 4 px ) saturate ( 150 % ) ;
-
-
-backdrop-filter : inherit;
-backdrop-filter : initial;
-backdrop-filter : unset; {{cssinfo}}
-
-Синтаксис
-
-Значения
-
-
- noneФильтр отключён для фона
- <filter-function-list>Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или SVG фильтра , которые применены для фона.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-CSS
-
-.box {
- background-color : rgba ( 255 , 255 , 255 , 0.3 ) ;
- border-radius : 5 px ;
- font-family : sans-serif;
- text-align : center;
- line-height : 1 ;
- -webkit-backdrop-filter : blur ( 10 px ) ;
- backdrop-filter : blur ( 10 px ) ;
- max-width : 50 % ;
- max-height : 50 % ;
- padding : 20 px 40 px ;
-}
-
-html,
-body {
- height : 100 % ;
- width : 100 % ;
-}
-
-body {
- background-image : url('https://lorempixel.com/400/200/') ;
- background-position : center center;
- background-repeat : no-repeat;
- background-size : cover;
-}
-
-.container {
- align-items : center;
- display : flex;
- justify-content : center;
- height : 100 % ;
- width : 10 } HTML
-
-< divclass = " container" > < divclass = " box" > < p> </ p> </ div> </ div> Результат
-
-{{EmbedLiveSample("Примеры", 600, 400)}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/backdrop-filter/index.md b/files/ru/web/css/backdrop-filter/index.md
new file mode 100644
index 00000000000000..788106bc7d86a9
--- /dev/null
+++ b/files/ru/web/css/backdrop-filter/index.md
@@ -0,0 +1,117 @@
+---
+title: backdrop-filter
+slug: Web/CSS/backdrop-filter
+translation_of: Web/CSS/backdrop-filter
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`backdrop-filter`** позволяет вам использовать визуальные эффекты - такие как размытие или смещение цвета фона - за элементом. Так как это применяется ко всему _за_ элементом, чтобы увидеть эффект, вы должны сделать элемент или его фон по крайней мере частично прозрачными.
+
+```css
+/* Keyword value */
+backdrop-filter: none;
+
+/* фильтр URL в SVG */
+backdrop-filter: url(commonfilters.svg#filter);
+
+/* значения */
+backdrop-filter: blur(2px);
+backdrop-filter: brightness(60%);
+backdrop-filter: contrast(40%);
+backdrop-filter: drop-shadow(4px 4px 10px blue);
+backdrop-filter: grayscale(30%);
+backdrop-filter: hue-rotate(120deg);
+backdrop-filter: invert(70%);
+backdrop-filter: opacity(20%);
+backdrop-filter: sepia(90%);
+backdrop-filter: saturate(80%);
+
+/* Несколько фильтров */
+backdrop-filter: url(filters.svg#filter) blur(4px) saturate(150%);
+
+/* Глобальные значения */
+backdrop-filter: inherit;
+backdrop-filter: initial;
+backdrop-filter: unset;
+```
+
+{{cssinfo}}
+
+## Синтаксис
+
+### Значения
+
+- `none`
+ - : Фильтр отключён для фона
+- ``
+ - : Перечень фильтров, разделённых пробелами функций {{cssxref("<filter-function>")}} или [SVG фильтра](/ru/docs/Web/SVG/Element/filter), которые применены для фона.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### CSS
+
+```css
+.box {
+ background-color: rgba(255, 255, 255, 0.3);
+ border-radius: 5px;
+ font-family: sans-serif;
+ text-align: center;
+ line-height: 1;
+ -webkit-backdrop-filter: blur(10px);
+ backdrop-filter: blur(10px);
+ max-width: 50%;
+ max-height: 50%;
+ padding: 20px 40px;
+}
+
+html,
+body {
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ background-image: url('https://lorempixel.com/400/200/');
+ background-position: center center;
+ background-repeat: no-repeat;
+ background-size: cover;
+}
+
+.container {
+ align-items: center;
+ display: flex;
+ justify-content: center;
+ height: 100%;
+ width: 10}
+```
+
+### HTML
+
+```html
+
+
+
backdrop-filter: blur(10px)
+
+
{{CSSRef}}{{SeeCompatTable}}
-
-Свойство backface-visibility
-
-{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
-
-Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)
-
-Синтаксис
-
-/* Значения ключевых слов */
-backface-visibility: visible;
-backface-visibility: hidden;
-
-/* Глобальные значения */
-backface-visibility: inherit;
-backface-visibility: initial;
-backface-visibility: unset;
-
-Свойство backface-visibility указывается в качестве одного из ключевых слов, перечисленных ниже.
-
-Значения
-
-
- visibleЗадняя сторона видна, когда повёрнута к пользователю.
- hiddenЗадняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.
-
-
-Официальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-В этом примере показан куб с прозрачными гранями.
-
-HTML
-
-<table>
- <tr>
- <th><code>backface-visibility: visible;</code></th>
- <th><code>backface-visibility: hidden;</code></th>
- </tr>
- <tr>
- <td>
- <div class="container">
- <div class="cube showbf">
- <div class="face front">1</div>
- <div class="face back">2</div>
- <div class="face right">3</div>
- <div class="face left">4</div>
- <div class="face top">5</div>
- <div class="face bottom">6</div>
- </div>
- </div>
- <p>
- Since all faces are partially transparent,
- the back faces (2, 4, 5) are visible
- through the front faces (1, 3, 6).
- </p>
- </td>
- <td>
- <div class="container">
- <div class="cube hidebf">
- <div class="face front">1</div>
- <div class="face back">2</div>
- <div class="face right">3</div>
- <div class="face left">4</div>
- <div class="face top">5</div>
- <div class="face bottom">6</div>
- </div>
- </div>
- <p>
- The three back faces (2, 4, 5) are
- hidden.
- </p>
- </td>
- </tr>
-</table>
-
-CSS
-
-/* Классы, которые будут показывать или скрывать
- три задние грани "куба" */
-.showbf div {
- backface-visibility: visible;
-}
-
-.hidebf div {
- backface-visibility: hidden;
-}
-
-/* Определяет контейнер div, кубический div и общую грань */
-.container {
- width: 150px;
- height: 150px;
- margin: 75px 0 0 75px;
- border: none;
-}
-
-.cube {
- width: 100%;
- height: 100%;
- perspective: 550px;
- perspective-origin: 150% 150%;
- transform-style: preserve-3d;
-}
-
-.face {
- display: block;
- position: absolute;
- width: 100px;
- height: 100px;
- border: none;
- line-height: 100px;
- font-family: sans-serif;
- font-size: 60px;
- color: white;
- text-align: center;
-}
-
-/* Определяет каждое лицо на основе направления */
-.front {
- background: rgba(0, 0, 0, 0.3);
- transform: translateZ(50px);
-}
-
-.back {
- background: rgba(0, 255, 0, 1);
- color: black;
- transform: rotateY(180deg) translateZ(50px);
-}
-
-.right {
- background: rgba(196, 0, 0, 0.7);
- transform: rotateY(90deg) translateZ(50px);
-}
-
-.left {
- background: rgba(0, 0, 196, 0.7);
- transform: rotateY(-90deg) translateZ(50px);
-}
-
-.top {
- background: rgba(196, 196, 0, 0.7);
- transform: rotateX(90deg) translateZ(50px);
-}
-
-.bottom {
- background: rgba(196, 0, 196, 0.7);
- transform: rotateX(-90deg) translateZ(50px);
-}
-
-/* Сделает стол немного лучше */
-th, p, td {
- background-color: #EEEEEE;
- margin: 0px;
- padding: 6px;
- font-family: sans-serif;
- text-align: left;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример', '100%', 360)}}
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}}
- {{Spec2('CSS Transforms 2')}}
- Первоначальное определение.
-
-
-
-
-{{cssinfo}}
-
-Совместимость с браузерами
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/backface-visibility/index.md b/files/ru/web/css/backface-visibility/index.md
new file mode 100644
index 00000000000000..0049560d7d5df2
--- /dev/null
+++ b/files/ru/web/css/backface-visibility/index.md
@@ -0,0 +1,192 @@
+---
+title: backface-visibility
+slug: Web/CSS/backface-visibility
+translation_of: Web/CSS/backface-visibility
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+Свойство **`backface-visibility`** определяет, видно ли заднюю грань элемента, когда он повёрнут к пользователю.
+
+{{EmbedInteractiveExample("pages/css/backface-visibility.html")}}
+
+Задняя поверхность элемента является зеркальным отражением его передней поверхности. Однако невидимая в 2D, задняя грань может быть видимой, когда преобразование вызывает вращение элемента в 3D пространстве. (Это свойство не влияет на 2D-преобразования, которые не имеют перспективы.)
+
+## Синтаксис
+
+```css
+/* Значения ключевых слов */
+backface-visibility: visible;
+backface-visibility: hidden;
+
+/* Глобальные значения */
+backface-visibility: inherit;
+backface-visibility: initial;
+backface-visibility: unset;
+```
+
+Свойство `backface-visibility` указывается в качестве одного из ключевых слов, перечисленных ниже.
+
+### Значения
+
+- `visible`
+ - : Задняя сторона видна, когда повёрнута к пользователю.
+- `hidden`
+ - : Задняя поверхность скрыта, что делает элемент невидимым, когда он повёрнутый от пользователя.
+
+### Официальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+В этом примере показан куб с прозрачными гранями.
+
+### HTML
+
+```html
+
+
+ backface-visibility: visible;backface-visibility: hidden;
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+ Since all faces are partially transparent,
+ the back faces (2, 4, 5) are visible
+ through the front faces (1, 3, 6).
+
+
+
+
+
+
1
+
2
+
3
+
4
+
5
+
6
+
+
+ The three back faces (2, 4, 5) are
+ hidden.
+
+
+
+
+```
+
+### CSS
+
+```css
+/* Классы, которые будут показывать или скрывать
+ три задние грани "куба" */
+.showbf div {
+ backface-visibility: visible;
+}
+
+.hidebf div {
+ backface-visibility: hidden;
+}
+
+/* Определяет контейнер div, кубический div и общую грань */
+.container {
+ width: 150px;
+ height: 150px;
+ margin: 75px 0 0 75px;
+ border: none;
+}
+
+.cube {
+ width: 100%;
+ height: 100%;
+ perspective: 550px;
+ perspective-origin: 150% 150%;
+ transform-style: preserve-3d;
+}
+
+.face {
+ display: block;
+ position: absolute;
+ width: 100px;
+ height: 100px;
+ border: none;
+ line-height: 100px;
+ font-family: sans-serif;
+ font-size: 60px;
+ color: white;
+ text-align: center;
+}
+
+/* Определяет каждое лицо на основе направления */
+.front {
+ background: rgba(0, 0, 0, 0.3);
+ transform: translateZ(50px);
+}
+
+.back {
+ background: rgba(0, 255, 0, 1);
+ color: black;
+ transform: rotateY(180deg) translateZ(50px);
+}
+
+.right {
+ background: rgba(196, 0, 0, 0.7);
+ transform: rotateY(90deg) translateZ(50px);
+}
+
+.left {
+ background: rgba(0, 0, 196, 0.7);
+ transform: rotateY(-90deg) translateZ(50px);
+}
+
+.top {
+ background: rgba(196, 196, 0, 0.7);
+ transform: rotateX(90deg) translateZ(50px);
+}
+
+.bottom {
+ background: rgba(196, 0, 196, 0.7);
+ transform: rotateX(-90deg) translateZ(50px);
+}
+
+/* Сделает стол немного лучше */
+th, p, td {
+ background-color: #EEEEEE;
+ margin: 0px;
+ padding: 6px;
+ font-family: sans-serif;
+ text-align: left;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример', '100%', 360)}}
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| -------------------------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- |
+| {{SpecName('CSS Transforms 2', '#propdef-backface-visibility', 'backface-visibility')}} | {{Spec2('CSS Transforms 2')}} | Первоначальное определение. |
+
+{{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование CSS преобразований](/ru/docs/Web/CSS/CSS_Transforms/Using_CSS_transforms)
diff --git a/files/ru/web/css/background-attachment/index.html b/files/ru/web/css/background-attachment/index.html
deleted file mode 100644
index dacb733ccb630e..00000000000000
--- a/files/ru/web/css/background-attachment/index.html
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: background-attachment
-slug: Web/CSS/background-attachment
-tags:
- - CSS
- - CSS Background
- - CSS Property
- - Reference
-translation_of: Web/CSS/background-attachment
----
-{{CSSRef}}
-
-Краткое описание
-
-Если указано {{Cssxref("background-image")}}, CSS свойство background-attachment определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* Ключевые значения */
-background-attachment: scroll;
-background-attachment: fixed;
-background-attachment: local;
-
-/* Глобальные значения */
-background-attachment: inherit;
-background-attachment: initial;
-background-attachment: unset;
-
-Значение свойства background-attachment задаётся одним из ключевых значений из списка ниже.
-
-Значения
-
-
- fixedФон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с {{cssxref("background-clip", "background-clip: text", "#text")}}.)
- localФон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
- scrollФон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Простой пример
-
-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
- get out again.
-</p>
-
-CSS
-
-p {
- background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
- background-attachment: fixed;
-}
-
-
-Результат
-
-{{EmbedLiveSample("Простой_пример")}}
-
-Поддержка нескольких фоновых изображений
-
-Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные <attachment> для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.
-
-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
- get out again.
-
- Suddenly she came upon a little three-legged table, all made of solid
- glass; there was nothing on it except a tiny golden key, and Alice's
- first thought was that it might belong to one of the doors of the hall;
- but, alas! either the locks were too large, or the key was too small,
- but at any rate it would not open any of them. However, on the second
- time round, she came upon a low curtain she had not noticed before, and
- behind it was a little door about fifteen inches high: she tried the
- little golden key in the lock, and to her great delight it fitted!
-</p>
-
-CSS
-
-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;
-}
-
-Результат
-
-{{EmbedLiveSample("Поддержка_нескольких_фоновых_изображений")}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость браузеров
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/background-attachment/index.md b/files/ru/web/css/background-attachment/index.md
new file mode 100644
index 00000000000000..011bd39e612e25
--- /dev/null
+++ b/files/ru/web/css/background-attachment/index.md
@@ -0,0 +1,124 @@
+---
+title: background-attachment
+slug: Web/CSS/background-attachment
+tags:
+ - CSS
+ - CSS Background
+ - CSS Property
+ - Reference
+translation_of: Web/CSS/background-attachment
+---
+{{CSSRef}}
+
+## Краткое описание
+
+Если указано {{Cssxref("background-image")}}, [CSS](/ru/docs/CSS "CSS") свойство `background-attachment` определяет, является ли позиция этого изображения фиксированной в области просмотра, или прокручивается вместе с содержащим его блоком.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* Ключевые значения */
+background-attachment: scroll;
+background-attachment: fixed;
+background-attachment: local;
+
+/* Глобальные значения */
+background-attachment: inherit;
+background-attachment: initial;
+background-attachment: unset;
+```
+
+Значение свойства `background-attachment` задаётся одним из ключевых значений из списка ниже.
+
+### Значения
+
+- `fixed`
+ - : Фон фиксируется относительно области просмотра. Даже если элемент имеет механизм прокрутки, фон не перемещается вместе с элементом. (Это значение несовместимо с {{cssxref("background-clip", "background-clip: text", "#text")}}.)
+- `local`
+ - : Фон фиксируется относительно содержимого элемента. Если элемент имеет механизм прокрутки, фон прокручивается с содержимым элемента, и область рисования фона и область позиционирования фона относятся к прокручиваемой области элемента, а не к границе, обрамляющей их.
+- `scroll`
+ - : Фон фиксируется относительно самого элемента и не прокручивается с его содержимым. (Он фактически прикреплён к границе элемента.)
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Простой пример
+
+#### HTML
+
+```html
+
+ 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
+ get out again.
+
+```
+
+#### CSS
+
+```css
+p {
+ background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif");
+ background-attachment: fixed;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample("Простой_пример")}}
+
+### Поддержка нескольких фоновых изображений
+
+Это свойство поддерживает несколько фоновых изображений. Вы можете указать разные `` для каждого фона, разделённых запятыми. Каждое изображение сопоставляется с соответствующим типом вложения, от первого указанного до последнего.
+
+#### HTML
+
+```html
+
+ 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
+ get out again.
+
+ Suddenly she came upon a little three-legged table, all made of solid
+ glass; there was nothing on it except a tiny golden key, and Alice's
+ first thought was that it might belong to one of the doors of the hall;
+ but, alas! either the locks were too large, or the key was too small,
+ but at any rate it would not open any of them. However, on the second
+ time round, she came upon a low curtain she had not noticed before, and
+ behind it was a little door about fifteen inches high: she tried the
+ little golden key in the lock, and to her great delight it fitted!
+
+```
+
+#### CSS
+
+```css
+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;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample("Поддержка_нескольких_фоновых_изображений")}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость браузеров
+
+{{Compat}}
+
+## Смотрите также
+
+- [Несколько фонов](/ru/docs/CSS/Multiple_backgrounds "CSS/Multiple backgrounds")
diff --git a/files/ru/web/css/background-clip/index.html b/files/ru/web/css/background-clip/index.html
deleted file mode 100644
index 67448e1ccf7f9a..00000000000000
--- a/files/ru/web/css/background-clip/index.html
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: background-clip
-slug: Web/CSS/background-clip
-translation_of: Web/CSS/background-clip
----
-{{CSSRef}}
-
-Описание
-
-Свойство CSS background-clip
-
-Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.
-
-Синтаксис
-
-/* Значения ключевых слов */
-background-clip: border-box;
-background-clip: padding-box;
-background-clip: content-box;
-background-clip: text;
-
-/* Глобальные значения */
-background-clip: inherit;
-background-clip: initial;
-background-clip: unset;Значения
-
-
- border-boxФон распространяется до внешнего края границы (но под границей в z-порядке).
- padding-boxФон распространяется до внешнего края отступа. Под границей фон не рисуется.
- content-boxФон закрашивается внутри (обрезается) поля содержимого.
- text {{experimental_inline}}Фон закрашивается внутри (обрезается) текста переднего плана.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML
-
-<p class="border-box">The background extends behind the border.</p>
-<p class="padding-box">The background extends to the inside edge of the border.</p>
-<p class="content-box">The background extends only to the edge of the content box.</p>
-<p class="text">The background is clipped to the foreground text.</p>CSS
-
-p {
- border: .8em darkviolet;
- border-style: dotted double;
- margin: 1em 0;
- padding: 1.4em;
- background: linear-gradient(60deg, red, yellow, red, yellow, red);
- font: 900 1.2em sans-serif;
- text-decoration: underline;
-}
-
-.border-box { background-clip: border-box; }
-.padding-box { background-clip: padding-box; }
-.content-box { background-clip: content-box; }
-
-.text {
- background-clip: text;
- color: rgba(0,0,0,.2);
-}Результат
-
-{{EmbedLiveSample('Example', 600, 580)}}
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}}
- {{Spec2('CSS3 Backgrounds')}}
- Первоначальное определение.
-
-
- {{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}}
- {{Spec2('CSS4 Backgrounds')}}
- Добавляет значение text.
-
-
-
-
-{{cssinfo}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
- Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}
- Введение в блочную модель CSS
diff --git a/files/ru/web/css/background-clip/index.md b/files/ru/web/css/background-clip/index.md
new file mode 100644
index 00000000000000..0b43e043eb2e15
--- /dev/null
+++ b/files/ru/web/css/background-clip/index.md
@@ -0,0 +1,99 @@
+---
+title: background-clip
+slug: Web/CSS/background-clip
+translation_of: Web/CSS/background-clip
+---
+{{CSSRef}}
+
+## Описание
+
+Свойство CSS **`background-clip`** определяет как цвет фона или фоновое изображение будут выводиться под границами блока.
+
+Если фоновое изображение или цвет не заданы, это свойство будет иметь визуальный эффект, только если у границы есть прозрачные области или частично непрозрачные области (из-за {{cssxref("border-style")}} или {{cssxref("border-image")}}); в противном случае граница скрывает разницу.
+
+## Синтаксис
+
+```css
+/* Значения ключевых слов */
+background-clip: border-box;
+background-clip: padding-box;
+background-clip: content-box;
+background-clip: text;
+
+/* Глобальные значения */
+background-clip: inherit;
+background-clip: initial;
+background-clip: unset;
+```
+
+### Значения
+
+- `border-box`
+ - : Фон распространяется до внешнего края границы (но под границей в z-порядке).
+- `padding-box`
+ - : Фон распространяется до внешнего края отступа. Под границей фон не рисуется.
+- `content-box`
+ - : Фон закрашивается внутри (обрезается) поля содержимого.
+- `text` {{experimental_inline}}
+ - : Фон закрашивается внутри (обрезается) текста переднего плана.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+#### HTML
+
+```html
+The background extends behind the border.
+The background extends to the inside edge of the border.
+The background extends only to the edge of the content box.
+The background is clipped to the foreground text.
+```
+
+#### CSS
+
+```css
+p {
+ border: .8em darkviolet;
+ border-style: dotted double;
+ margin: 1em 0;
+ padding: 1.4em;
+ background: linear-gradient(60deg, red, yellow, red, yellow, red);
+ font: 900 1.2em sans-serif;
+ text-decoration: underline;
+}
+
+.border-box { background-clip: border-box; }
+.padding-box { background-clip: padding-box; }
+.content-box { background-clip: content-box; }
+
+.text {
+ background-clip: text;
+ color: rgba(0,0,0,.2);
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Example', 600, 580)}}
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | --------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-background-clip', 'background-clip')}} | {{Spec2('CSS3 Backgrounds')}} | Первоначальное определение. |
+| {{SpecName('CSS4 Backgrounds', '#background-clip', 'background-clip')}} | {{Spec2('CSS4 Backgrounds')}} | Добавляет значение `text`. |
+
+{{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- Свойство {{cssxref("clip-path")}} создаёт область отсечения, которая определяет, которая определяет, какая часть целого элемента должна отображаться.
+- Свойства фона: {{cssxref("background")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}
+- [Введение в блочную модель CSS](/ru/docs/Web/CSS/box_model)
diff --git a/files/ru/web/css/background-color/index.html b/files/ru/web/css/background-color/index.html
deleted file mode 100644
index 6351667bc298d6..00000000000000
--- a/files/ru/web/css/background-color/index.html
+++ /dev/null
@@ -1,135 +0,0 @@
----
-title: background-color
-slug: Web/CSS/background-color
-tags:
- - CSS
- - CSS-свойства
- - CSS фоны
- - Графика
- - Определение
- - Раскладка
-translation_of: Web/CSS/background-color
----
-{{CSSRef}}
-
-CSS -свойство background-colorCSS устанавливает цвет фона элемента.
-
-{{EmbedInteractiveExample("pages/css/background-color.html")}}
-
-Синтаксис
-
-/* Словесные значения */
-background-color: red;
-
-/* Шестнадцатеричное значение */
-background-color: #bbff00;
-
-/* Шестнадцатеричное значение с alpha-каналом */
-background-color: #11ffee00; /* 00 - полностью прозрачный */
-background-color: #11ffeeff; /* ff - непрозрачный */
-
-/* RGB-значение */
-background-color: rgb(255, 255, 128);
-
-/* RGBA-значение или RGB с alpha-каналом */
-background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */
-background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
-background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */
-
-/* HSLA-значение */
-background-color: hsla(50, 33%, 25%, 0.75);
-
-/* Специальные словесные значения */
-background-color: currentColor;
-background-color: transparent;
-
-/* Общие значения */
-background-color: inherit;
-background-color: initial;
-background-color: unset;
-
-
-Свойство
background-color определяется единственным значением
<color> .
Значения
-
-
- {{cssxref("<color>")}}
- Является CSS {{cssxref("<color>")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML
-
-<div class="exampleone">
- Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="exampletwo">
- Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-<div class="examplethree">
- Lorem ipsum dolor sit amet, consectetuer
-</div>
-
-CSS
-
-.exampleone {
- background-color: teal;
- color: white;
-}
-
-.exampletwo {
- background-color: rgb(153, 102, 153);
- color: rgb(255, 255, 204);
-}
-
-.examplethree {
- background-color: #777799;
- color: #FFFFFF;
-}
-
-
-Результат
-
-{{EmbedLiveSample("Примеры","200","150")}}
-
-Проблемы доступности
-
-Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
-
-Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG) , требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
-
-
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость с браузерами
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/background-color/index.md b/files/ru/web/css/background-color/index.md
new file mode 100644
index 00000000000000..e296449aacfd10
--- /dev/null
+++ b/files/ru/web/css/background-color/index.md
@@ -0,0 +1,130 @@
+---
+title: background-color
+slug: Web/CSS/background-color
+tags:
+ - CSS
+ - CSS-свойства
+ - CSS фоны
+ - Графика
+ - Определение
+ - Раскладка
+translation_of: Web/CSS/background-color
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS)-свойство **`background-color`** [CSS](/ru/docs/Web/CSS "CSS") устанавливает цвет фона элемента.
+
+{{EmbedInteractiveExample("pages/css/background-color.html")}}
+
+## Синтаксис
+
+```css
+/* Словесные значения */
+background-color: red;
+
+/* Шестнадцатеричное значение */
+background-color: #bbff00;
+
+/* Шестнадцатеричное значение с alpha-каналом */
+background-color: #11ffee00; /* 00 - полностью прозрачный */
+background-color: #11ffeeff; /* ff - непрозрачный */
+
+/* RGB-значение */
+background-color: rgb(255, 255, 128);
+
+/* RGBA-значение или RGB с alpha-каналом */
+background-color: rgba(117, 190, 218, 0.0); /* 0.0 - полностью прозрачный */
+background-color: rgba(117, 190, 218, 0.5); /* 0.5 - полупрозрачный */
+background-color: rgba(117, 190, 218, 1.0); /* 1.0 - непрозрачный */
+
+/* HSLA-значение */
+background-color: hsla(50, 33%, 25%, 0.75);
+
+/* Специальные словесные значения */
+background-color: currentColor;
+background-color: transparent;
+
+/* Общие значения */
+background-color: inherit;
+background-color: initial;
+background-color: unset;
+```
+
+Свойство `background-color` определяется единственным значением [``](#).
+
+### Значения
+
+- {{cssxref("<color>")}}
+ - : Является CSS {{cssxref("<color>")}}, которое описывает цвет фона. Даже если заданы одно или несколько {{cssxref("background-image")}}, цвет может отрендерится, если изображения прозрачны.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### HTML
+
+```html
+
+ Lorem ipsum dolor sit amet, consectetuer
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer
+
+
+
+ Lorem ipsum dolor sit amet, consectetuer
+
+```
+
+### CSS
+
+```css
+.exampleone {
+ background-color: teal;
+ color: white;
+}
+
+.exampletwo {
+ background-color: rgb(153, 102, 153);
+ color: rgb(255, 255, 204);
+}
+
+.examplethree {
+ background-color: #777799;
+ color: #FFFFFF;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample("Примеры","200","150")}}
+
+## Проблемы доступности
+
+Важно обеспечить достаточный цветовой контраст между цветом текста и фоном, чтобы люди со слабым зрением могли его прочитать, но при этом должна быть достаточная разница между введённым текстом и текстом placeholder, чтобы пользователь не путал их.
+
+Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/intro/wcag), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.
+
+- [WebAIM: Color Contrast Checker](https://webaim.org/resources/contrastchecker/)
+- [MDN Understanding WCAG, Guideline 1.4 explanations](/ru/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.4_Make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background)
+- [Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html)
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Множественные фоны](/ru/docs/Web/CSS/CSS_Background_and_Borders/Множественные_фоны)
+- Тип данных {{cssxref("<color>")}}
+- Другие свойства, связанные с цветом: {{cssxref("color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, {{cssxref("caret-color")}}, и {{cssxref("column-rule-color")}}
+- [Применение цвета к HTML элементам с помощью CSS](/ru/docs/Web/HTML/Applying_color)
diff --git a/files/ru/web/css/background-image/index.html b/files/ru/web/css/background-image/index.html
deleted file mode 100644
index f198037c9ef816..00000000000000
--- a/files/ru/web/css/background-image/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: background-image
-slug: Web/CSS/background-image
-tags:
- - CSS
- - CSS Background
- - CSS Property
- - Reference
-translation_of: Web/CSS/background-image
----
-{{CSSRef}}
-
-Краткое описание
-
-Свойство CSS background-image
-
-Границы {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.
-
-Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением none.
-
-Обратите внимание: Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
-
-{{cssinfo}}
-
-Синтаксис
-
-background-image: none;
-background-image: url(http://www.example.com/bck.png);
-
-background-image: inherit;
-
-
-Значения
-
-
- noneЭто ключевое слово обозначает отсутствие изображений.
- <image>{{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается несколько фонов .
-
-
-Официальный синтаксис
-
-{{csssyntax("background-image")}}
-
-Примеры
-
-Несколько фонов и прозрачность
-
-Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.
-
-HTML содержимое
-
-<div>
- <p class="catsandstars">
- This paragraph is full of cats<br />and stars.
- </p>
- <p>This paragraph is not.</p>
- <p class="catsandstars">
- Here are more cats for you.<br />Look at them!
- </p>
- <p>And no more.</p>
-</div>
-
-CSS содержимое
-
-pre, p {
- font-size: 1.5em;
- color: #FE7F88;
- background-color: transparent;
-}
-
-div {
- background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png");
-}
-
-p {
- background-image: none;
-}
-
-.catsandstars {
- background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"),
- url("https://mdn.mozillademos.org/files/7693/catfront.png");
- background-color: transparent;
-}
-
-
-{{EmbedLiveSample('Multiple_backgrounds_and_transparency')}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость браузеров
-
-{{Compat}}
-
-Смотрите также
-
-
- CSS спрайты изображений {{HTMLElement("img")}}
- Статьи, связанные с изображениями:: {{cssxref("<image>")}}, {{cssxref("linear-gradient")}}, {{cssxref("radial-gradient")}}, {{cssxref("repeating-linear-gradient")}}, {{cssxref("repeating-radial-gradient")}}, {{cssxref("element")}}.
-
diff --git a/files/ru/web/css/background-image/index.md b/files/ru/web/css/background-image/index.md
new file mode 100644
index 00000000000000..e9eca2cd56b403
--- /dev/null
+++ b/files/ru/web/css/background-image/index.md
@@ -0,0 +1,104 @@
+---
+title: background-image
+slug: Web/CSS/background-image
+tags:
+ - CSS
+ - CSS Background
+ - CSS Property
+ - Reference
+translation_of: Web/CSS/background-image
+---
+{{CSSRef}}
+
+## Краткое описание
+
+Свойство [CSS](/ru/docs/CSS) **`background-image`** устанавливает одно или несколько фоновых изображений для элемента. Изображения рисуются в слоях контекстов наложения одно поверх другого. Первый слой выводится так, чтобы он был ближе всего к пользователю.
+
+[Границы](/ru/CSS/border "border") {{cssxref("border")}} элемента затем рисуются поверх них, и {{cssxref("background-color")}} рисуется под ними. То, как изображения отрисовываются относительно рамки и её границ, определяется CSS-свойствами {{cssxref("background-clip")}} и {{cssxref("background-origin")}}.
+
+Если указанное изображение не может быть нарисовано (например, когда файл, определённый указанным URI, не может быть загружен), браузеры обрабатывают его так, как если бы оно было значением `none`.
+
+> **Примечание:** **Обратите внимание:** Даже, если изображение непрозрачно и цвет не будет показан при нормальных обстоятельствах, веб-разработчику следует всегда указывать атрибут {{cssxref("background-color")}}. Если изображение не может быть загружено —например, в случае отказа сетевого подключения — у элемента будет отображён цветной фон.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+background-image: none;
+background-image: url(http://www.example.com/bck.png);
+
+background-image: inherit;
+```
+
+### Значения
+
+- `none`
+ - : Это ключевое слово обозначает отсутствие изображений.
+- ``
+ - : {{cssxref("<image>")}} обозначает изображение для отображения. Их может быть несколько, разделённых запятыми, поскольку поддерживается[ несколько фонов](/ru/docs/CSS/Multiple_backgrounds "Multiple backgrounds").
+
+### Официальный синтаксис
+
+{{csssyntax("background-image")}}
+
+## Примеры
+
+### Несколько фонов и прозрачность
+
+Обратите внимание, что изображение звезды частично прозрачно и наложено на изображение кошки.
+
+#### HTML содержимое
+
+```html
+
+
+ This paragraph is full of cats
+
This paragraph is not.
+
+ Here are more cats for you.
+
And no more.
+
{{CSSRef}}
-
-CSS свойство background-originобласть расположения фона . Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства {{cssxref("background-image")}}.
-
-{{EmbedInteractiveExample("pages/css/background-origin.html")}}
-
-Обратите внимание, что background-origin игнорируется, когда {{cssxref("background-attachment")}} является fixed.
-
-Примечание: Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
-
-Синтаксис
-
-/* Ключевые значения */
-background-origin: border-box;
-background-origin: padding-box;
-background-origin: content-box;
-
-/* Глобальные значения */
-background-origin: inherit;
-background-origin: initial;
-background-origin: unset;
-
-
-Свойство background-origin указывается в качестве одного из значений ключевых слов, перечисленных ниже.
-
-Значения
-
-
- border-boxФон располагается относительно рамки.
- padding-boxФон расположен относительно поля отступа.
- content-boxФон располагается относительно поля содержимого.
-
-
-Официальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-.example {
- border: 10px double;
- padding: 10px;
- background: url('image.jpg');
- background-position: center left;
- background-origin: content-box;
-}
-
-
-#example2 {
- border: 4px solid black;
- padding: 10px;
- background: url('image.gif');
- background-repeat: no-repeat;
- background-origin: border-box;
-}
-
-
-div {
- background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
- background-position: top right, 0px 0px;
- background-origin: content-box, padding-box;
-}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость браузеров
-{{Compat}}
-
-Смотрите также
-
-
- {{cssxref("background-clip")}}
-
diff --git a/files/ru/web/css/background-origin/index.md b/files/ru/web/css/background-origin/index.md
new file mode 100644
index 00000000000000..f5f4dafd82a33b
--- /dev/null
+++ b/files/ru/web/css/background-origin/index.md
@@ -0,0 +1,87 @@
+---
+title: background-origin
+slug: Web/CSS/background-origin
+translation_of: Web/CSS/background-origin
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`background-origin`** устанавливает _область расположения фона_. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства {{cssxref("background-image")}}.
+
+{{EmbedInteractiveExample("pages/css/background-origin.html")}}
+
+Обратите внимание, что `background-origin` игнорируется, когда {{cssxref("background-attachment")}} является `fixed`.
+
+> **Примечание:** Сокращение {{cssxref("background")}} сбрасывает значения этого свойства к его начальному значению, если оно не указано.
+
+## Синтаксис
+
+```css
+/* Ключевые значения */
+background-origin: border-box;
+background-origin: padding-box;
+background-origin: content-box;
+
+/* Глобальные значения */
+background-origin: inherit;
+background-origin: initial;
+background-origin: unset;
+```
+
+Свойство `background-origin` указывается в качестве одного из значений ключевых слов, перечисленных ниже.
+
+### Значения
+
+- `border-box`
+ - : Фон располагается относительно рамки.
+- `padding-box`
+ - : Фон расположен относительно поля отступа.
+- `content-box`
+ - : Фон располагается относительно поля содержимого.
+
+### Официальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+```css
+.example {
+ border: 10px double;
+ padding: 10px;
+ background: url('image.jpg');
+ background-position: center left;
+ background-origin: content-box;
+}
+```
+
+```css
+#example2 {
+ border: 4px solid black;
+ padding: 10px;
+ background: url('image.gif');
+ background-repeat: no-repeat;
+ background-origin: border-box;
+}
+```
+
+```css
+div {
+ background-image: url('logo.jpg'), url('mainback.png'); /* Applies two images to the background */
+ background-position: top right, 0px 0px;
+ background-origin: content-box, padding-box;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость браузеров
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("background-clip")}}
diff --git a/files/ru/web/css/background-position-x/index.html b/files/ru/web/css/background-position-x/index.html
deleted file mode 100644
index ca2d1c4e913da7..00000000000000
--- a/files/ru/web/css/background-position-x/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: background-position-x
-slug: Web/CSS/background-position-x
-translation_of: Web/CSS/background-position-x
----
-{{CSSRef}}
-
-Свойство background-position-xCSS - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства {{cssxref("background-origin")}}.
-
-{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
-
-
-
-Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.
-
-Синтаксис
-
-/* Keyword values */
-background-position-x: left;
-background-position-x: center;
-background-position-x: right;
-
-/* <percentage> values */
-background-position-x: 25%;
-
-/* <length> values */
-background-position-x: 0px;
-background-position-x: 1cm;
-background-position-x: 8em;
-
-/* Side-relative values */
-background-position-x: right 3px;
-background-position-x: left 25%;
-
-/* Multiple values */
-background-position-x: 0px, center;
-
-/* Global values */
-background-position-x: inherit;
-background-position-x: initial;
-background-position-x: unset;
-
-
-Свойство background-position-x принимает одно или несколько значений, разделённых запятыми.
-
-Значения
-
-
- leftВыравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
- centerВыравнивает центр фонового изображения по центру фонового позиционирующего слоя.
- rightВыравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
- {{cssxref("<length>")}}
- Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения). {{cssxref("<percentage>")}}
- Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость с браузерами
-{{Compat}}
-
-Смотрите также
-
-
- {{cssxref("background-position")}}
- {{cssxref("background-position-y")}}
- {{cssxref("background-position-inline")}}
- {{cssxref("background-position-block")}}
- Использование множественных фонов
diff --git a/files/ru/web/css/background-position-x/index.md b/files/ru/web/css/background-position-x/index.md
new file mode 100644
index 00000000000000..46c95d3fe08338
--- /dev/null
+++ b/files/ru/web/css/background-position-x/index.md
@@ -0,0 +1,78 @@
+---
+title: background-position-x
+slug: Web/CSS/background-position-x
+translation_of: Web/CSS/background-position-x
+---
+{{CSSRef}}
+
+Свойство **`background-position-x`** - это [CSS](/ru/docs/Web/CSS) - свойство, которое устанавливает начальную горизонтальную позицию для каждого фонового изображения. Эта позиция является относительной к позиции слоя, установленной с помощью свойства {{cssxref("background-origin")}}.
+
+{{EmbedInteractiveExample("pages/css/background-position-x.html")}}
+
+Значение этого свойства отменяется любой декларацией {{cssxref("background")}} или коротким свойством {{cssxref("background-position")}} применёнными после его объявления.
+
+## Синтаксис
+
+```css
+/* Keyword values */
+background-position-x: left;
+background-position-x: center;
+background-position-x: right;
+
+/* values */
+background-position-x: 25%;
+
+/* values */
+background-position-x: 0px;
+background-position-x: 1cm;
+background-position-x: 8em;
+
+/* Side-relative values */
+background-position-x: right 3px;
+background-position-x: left 25%;
+
+/* Multiple values */
+background-position-x: 0px, center;
+
+/* Global values */
+background-position-x: inherit;
+background-position-x: initial;
+background-position-x: unset;
+```
+
+Свойство `background-position-x` принимает одно или несколько значений, разделённых запятыми.
+
+### Значения
+
+- `left`
+ - : Выравнивает левый край фонового изображения по левому краю фонового позиционирующего слоя.
+- `center`
+ - : Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.
+- `right`
+ - : Выравнивает правый край фонового изображения по правому краю фонового позиционирующего слоя.
+- {{cssxref("<length>")}}
+ - : Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).
+- {{cssxref("<percentage>")}}
+ - : Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("background-position")}}
+- {{cssxref("background-position-y")}}
+- {{cssxref("background-position-inline")}}
+- {{cssxref("background-position-block")}}
+- [Использование множественных фонов](/ru/docs/CSS/Multiple_backgrounds "CSS/Multiple backgrounds")
diff --git a/files/ru/web/css/background-position/index.html b/files/ru/web/css/background-position/index.html
deleted file mode 100644
index dadba74d70e086..00000000000000
--- a/files/ru/web/css/background-position/index.html
+++ /dev/null
@@ -1,147 +0,0 @@
----
-title: background-position
-slug: Web/CSS/background-position
-translation_of: Web/CSS/background-position
----
-{{CSSRef}}
-
-CSS свойство background-position
-
-{{EmbedInteractiveExample("pages/css/background-position.html")}}
-
-Синтаксис
-
-/* Ключевые значения */
-background-position: top;
-background-position: bottom;
-background-position: left;
-background-position: right;
-background-position: center;
-
-/* <процент> значения */
-background-position: 25% 75%;
-
-/* <отрезок> значения */
-background-position: 0 0;
-background-position: 1cm 2cm;
-background-position: 10ch 8em;
-
-/* Несколько изображений */
-background-position: 0 0, center;
-
-/* Значения смещения края */
-background-position: bottom 10px right 20px;
-background-position: right 3em bottom 10px;
-background-position: bottom 10px right;
-background-position: top right 10px;
-
-/* Глобальные значения */
-background-position: inherit;
-background-position: initial;
-background-position: unset;
-
-
-Свойство background-position указывается в виде одного или нескольких значений <position>
-
-Значения
-
-
- <position>{{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается center.
- Синтаксис 1-значения: значение может быть:
-
-
- Значение ключевого слова center, которое центрирует изображение.
- Одно из значений ключевых слов top, left, bottom, right. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
- {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.
-
-
- Синтаксис с 2-значениями: одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
-
-
- Одно из значений ключевых слов top, left, bottom, right. Если здесь указаны left или right, то оно определяет X, а другое заданное значение определяет Y. Если даны top или bottom, то оно определяет Y, а другое значение определяет X.
- {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является left или right, то оно определяет Y, относительно верхнего края. Если другое значение top или bottom, то оно определяет X, относительно левого края. Если оба значения <length> или <percentage>, то первое определяет X, а второе Y.
-
-
- Обратите внимание,что:
-
-
- Если одно значение top или bottom, то другое значение не может быть top или bottom.
- Если одно значение является left или right, то другое значение не может быть left или right.
-
-
- Это означает, например, что top top и left right являются недействительные.
-
-
-Официальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.
-
-HTML
-
-<div class="exampleone">Example One</div>
-<div class="exampletwo">Example Two</div>
-<div class="examplethree">Example Three</div>
-
-CSS
-
-/* Общий среди всех <div>-ов */
-div {
- background-color: #FFEE99;
- background-repeat: no-repeat;
- width: 300px;
- height: 80px;
- margin-bottom: 12px;
-}
-
-/* В этих примерах используется сокращённое свойство 'background' */
-.exampleone {
- background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
-}
-.exampletwo {
- background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
-}
-
-/* Несколько фоновых изображений: каждое изображение сопоставляется
- с соответствующей позицией, от первого указанного до последнего. */
-.examplethree {
- background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
- url("https://mdn.mozillademos.org/files/7693/catfront.png");
- background-position: 0px 0px,
- center;
-}
-
-Результат
-
-{{EmbedLiveSample('Examples', 420, 200)}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость браузеров
-{{Compat}}
-
-Quantum CSS заметки
-
-
- В Gecko есть ошибка, означающая, что background-position не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("<position>")}}, для примера background-position: 10px 10px; and background-position: 20px 20px, 30px 30px; (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo , который планируется выпустить в Firefox 57) исправляет это.
-
-
-Смотрите также
-
-
- {{cssxref("background-position-x")}}
- {{cssxref("background-position-y")}}
- {{cssxref("background-position-inline")}}
- {{cssxref("background-position-block")}}
- Использование нескольких значений {{cssxref("transform-origin")}}
-
diff --git a/files/ru/web/css/background-position/index.md b/files/ru/web/css/background-position/index.md
new file mode 100644
index 00000000000000..a38b17a89a4b07
--- /dev/null
+++ b/files/ru/web/css/background-position/index.md
@@ -0,0 +1,127 @@
+---
+title: background-position
+slug: Web/CSS/background-position
+translation_of: Web/CSS/background-position
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`background-position`** устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного {{cssxref("background-origin")}}.
+
+{{EmbedInteractiveExample("pages/css/background-position.html")}}
+
+## Синтаксис
+
+```css
+/* Ключевые значения */
+background-position: top;
+background-position: bottom;
+background-position: left;
+background-position: right;
+background-position: center;
+
+/* <процент> значения */
+background-position: 25% 75%;
+
+/* <отрезок> значения */
+background-position: 0 0;
+background-position: 1cm 2cm;
+background-position: 10ch 8em;
+
+/* Несколько изображений */
+background-position: 0 0, center;
+
+/* Значения смещения края */
+background-position: bottom 10px right 20px;
+background-position: right 3em bottom 10px;
+background-position: bottom 10px right;
+background-position: top right 10px;
+
+/* Глобальные значения */
+background-position: inherit;
+background-position: initial;
+background-position: unset;
+```
+
+Свойство `background-position` указывается в виде одного или нескольких значений [``](#), разделённых запятыми.
+
+### Значения
+
+- ``
+ - : {{cssxref("<position>")}}. Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается `center`.**Синтаксис 1-значения:** значение может быть:\* Значение ключевого слова `center`, которое центрирует изображение.
+ - Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Оно указывает край напротив, которого нужно поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
+ - {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%.**Синтаксис с 2-значениями:** одно из значений определяет X, а другое определяет Y. Каждое значение может быть:\* Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Если здесь указаны `left` или `right`, то оно определяет X, а другое заданное значение определяет Y. Если даны `top` или `bottom`, то оно определяет Y, а другое значение определяет X.
+ - {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Если другое значение является `left` или `right`, то оно определяет Y, относительно верхнего края. Если другое значение `top` или `bottom`, то оно определяет X, относительно левого края. Если оба значения `` или ``, то первое определяет X, а второе Y.Обратите внимание,что:\* Если одно значение `top` или `bottom`, то другое значение не может быть `top` или `bottom`.
+ - Если одно значение является `left` или `right`, то другое значение не может быть `left` или `right`.Это означает, например, что `top top` и `left right` являются недействительные.
+
+### Официальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+Каждый из этих примеров использует свойство {{cssxref("background")}} для создания жёлтого, прямоугольного элемента, содержащего изображение звезды. В каждом примере, звезда находится в другой позиции. Третий пример иллюстрирует, как указать позиции для разных фоновых изображений в одном элементе.
+
+### HTML
+
+```html
+Example One
+Example Two
+Example Three
+```
+
+### CSS
+
+```css
+/* Общий среди всех -ов */
+div {
+ background-color: #FFEE99;
+ background-repeat: no-repeat;
+ width: 300px;
+ height: 80px;
+ margin-bottom: 12px;
+}
+
+/* В этих примерах используется сокращённое свойство 'background' */
+.exampleone {
+ background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 2.5cm bottom no-repeat;
+}
+.exampletwo {
+ background: url("https://mdn.mozillademos.org/files/11987/startransparent.gif") #FFEE99 3em 50% no-repeat;
+}
+
+/* Несколько фоновых изображений: каждое изображение сопоставляется
+ с соответствующей позицией, от первого указанного до последнего. */
+.examplethree {
+ background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"),
+ url("https://mdn.mozillademos.org/files/7693/catfront.png");
+ background-position: 0px 0px,
+ center;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Examples', 420, 200)}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость браузеров
+
+{{Compat}}
+
+### Quantum CSS заметки
+
+- В Gecko есть ошибка, означающая, что `background-position` не может быть {{cssxref("transition","transitioned")}} между двумя значениями, содержащими разные числа значений {{cssxref("<position>")}}, для примера `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (смотрите {{bug(1390446)}}). Новый параллельный CSS движок Firefox (также известный как [Quantum CSS](https://wiki.mozilla.org/Quantum) или [Stylo](https://wiki.mozilla.org/Quantum/Stylo), который планируется выпустить в Firefox 57) исправляет это.
+
+## Смотрите также
+
+- {{cssxref("background-position-x")}}
+- {{cssxref("background-position-y")}}
+- {{cssxref("background-position-inline")}}
+- {{cssxref("background-position-block")}}
+- [Использование нескольких значений](/ru/docs/Web/CSS/Multiple_backgrounds "CSS/Multiple backgrounds")
+- {{cssxref("transform-origin")}}
diff --git a/files/ru/web/css/background-repeat/index.html b/files/ru/web/css/background-repeat/index.html
deleted file mode 100644
index 9cbbc8d111b018..00000000000000
--- a/files/ru/web/css/background-repeat/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
----
-title: background-repeat
-slug: Web/CSS/background-repeat
-tags:
- - CSS
- - CSS Background
- - CSS Property
- - Reference
-translation_of: Web/CSS/background-repeat
----
-
-
{{CSSRef}}
-
-
Свойство background-repeat
-
-
{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
-
-
Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.
-
-
По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя round) или равномерно растянуть от конца к концу (используя space).
-
-
-
-
-
Синтаксис
-
-
/*Ключевые значения*/
-background-repeat: repeat-x;
-background-repeat: repeat-y;
-background-repeat: repeat;
-background-repeat: space;
-background-repeat: round;
-background-repeat: no-repeat;
-
-/*Два значения: горизонтальное | вертикальное*/
-background-repeat: repeat space;
-background-repeat: repeat repeat;
-background-repeat: round space;
-background-repeat: no-repeat round;
-
-/* Глобальные значения */
-background-repeat: inherit;
-background-repeat: initial;
-background-repeat: unset;
-
-
Значения
-
-
- < repeat-style> Следующие однозначные имеют двухзначные эквиваленты:
-
-
-
- repeat-xтоже самое, что и repeat no-repeat
-
-
- repeat-yтоже самое, что и no-repeat repeat
-
-
- repeatтоже самое, что и repeat repeat
-
-
- spaceтоже самое, что и space space
-
-
- roundтоже самое, что и round round
-
-
- no-repeatтоже самое, что и no-repeat no-repeat
-
-
-
- В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные.
-
-
- repeatИзображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места.
-
-
- spaceИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение space.
-
-
- roundИзображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей.
-
-
- no-repeatИзображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством {{cssxref("background-position")}}.
-
-
-
-
-
-
Примеры
-
-
HTML
-
-
<ol>
- <li>no-repeat
- <div class="one"> </div>
- </li>
- <li>repeat
- <div class="two"> </div>
- </li>
- <li>repeat-x
- <div class="three"> </div>
- </li>
- <li>repeat-y
- <div class="four"> </div>
- </li>
- <li>repeat-x, repeat-y (multiple images)
- <div class="five"> </div>
- </li>
-</ol>
-
-
CSS
-
-
/* Совместно для всех DIVS в примере */
-li {margin-bottom: 12px;}
-div {
- background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
- width: 144px;
- height: 84px;
-}
-
-/* повторение фона CSS */
-.one {
- background-repeat: no-repeat;
-}
-.two {
- background-repeat: repeat;
-}
-.three {
- background-repeat: repeat-x;
-}
-.four {
- background-repeat: repeat-y;
-}
-
-/* Несколько изображений */
-.five {
- background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
- url(https://developer.mozilla.org/static/img/favicon32.png);
- background-repeat: repeat-x,
- repeat-y;
- height: 144px;
-}
-
-
Результат
-
-
В этом примере каждому элементу списка соответствует другое значение background-repeat.
-
-
{{EmbedLiveSample('Примеры', 240, 360)}}
-
-
Спецификация
-
-{{Specifications}}
-
-
{{cssinfo}}
-
-
Поддержка браузеров
-
-
{{Compat}}
-
-
Смотрите также
-
-
-
-
diff --git a/files/ru/web/css/background-repeat/index.md b/files/ru/web/css/background-repeat/index.md
new file mode 100644
index 00000000000000..72e2e98fd67288
--- /dev/null
+++ b/files/ru/web/css/background-repeat/index.md
@@ -0,0 +1,135 @@
+---
+title: background-repeat
+slug: Web/CSS/background-repeat
+tags:
+ - CSS
+ - CSS Background
+ - CSS Property
+ - Reference
+translation_of: Web/CSS/background-repeat
+---
+{{CSSRef}}
+
+Свойство **`background-repeat`** устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.
+
+{{EmbedInteractiveExample("pages/css/background-repeat.html")}}
+
+Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте
и отправьте нам запрос на извлечение.
+
+По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя `round`) или равномерно растянуть от конца к концу (используя `space`).
+
+## Синтаксис
+
+ /*Ключевые значения*/
+ background-repeat: repeat-x;
+ background-repeat: repeat-y;
+ background-repeat: repeat;
+ background-repeat: space;
+ background-repeat: round;
+ background-repeat: no-repeat;
+
+ /*Два значения: горизонтальное | вертикальное*/
+ background-repeat: repeat space;
+ background-repeat: repeat repeat;
+ background-repeat: round space;
+ background-repeat: no-repeat round;
+
+ /* Глобальные значения */
+ background-repeat: inherit;
+ background-repeat: initial;
+ background-repeat: unset;
+
+### Значения
+
+- ``
+ - | : Следующие однозначные имеют двухзначные эквиваленты: | `repeat-x` | тоже самое, что и `repeat no-repeat` |
+ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ |
+ | `repeat-y` | тоже самое, что и `no-repeat repeat` |
+ | `repeat` | тоже самое, что и `repeat repeat` |
+ | `space` | тоже самое, что и `space space` |
+ | `round` | тоже самое, что и `round round` |
+ | `no-repeat` | тоже самое, что и `no-repeat no-repeat` | В двухзначном синтаксисе первое означает горизонтальные повторения, а второе вертикальные. |
+ | `repeat` | Изображения повторяются столько, сколько необходимо, чтобы полностью покрыть область элемента, последнее обрезается, если не хватает места. |
+ | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+ | `space` | Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Оставшееся незакрытое пространство равномерно распределено между изображениями. Первое и последнее изображения касаются края элемента. Значение CSS-свойства {{cssxref("background-position")}} игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение `space`. |
+ | `round` | Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей. |
+ | `no-repeat` | Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством {{cssxref("background-position")}}. |
+
+## Примеры
+
+### HTML
+
+```html
+
+ no-repeat
+
+
+ repeat
+
+
+ repeat-x
+
+
+ repeat-y
+
+
+ repeat-x, repeat-y (multiple images)
+
+
+
+```
+
+### CSS
+
+```css
+/* Совместно для всех DIVS в примере */
+li {margin-bottom: 12px;}
+div {
+ background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif);
+ width: 144px;
+ height: 84px;
+}
+
+/* повторение фона CSS */
+.one {
+ background-repeat: no-repeat;
+}
+.two {
+ background-repeat: repeat;
+}
+.three {
+ background-repeat: repeat-x;
+}
+.four {
+ background-repeat: repeat-y;
+}
+
+/* Несколько изображений */
+.five {
+ background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif),
+ url(https://developer.mozilla.org/static/img/favicon32.png);
+ background-repeat: repeat-x,
+ repeat-y;
+ height: 144px;
+}
+```
+
+### Результат
+
+В этом примере каждому элементу списка соответствует другое значение `background-repeat`.
+
+{{EmbedLiveSample('Примеры', 240, 360)}}
+
+## Спецификация
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Поддержка браузеров
+
+{{Compat}}
+
+## Смотрите также
+
+- [Использование нескольких CSS фонов](/ru/docs/CSS/Using_CSS_multiple_backgrounds "CSS/Using_CSS_multiple_backgrounds")
diff --git a/files/ru/web/css/background-size/index.html b/files/ru/web/css/background-size/index.html
deleted file mode 100644
index 9da059419eb570..00000000000000
--- a/files/ru/web/css/background-size/index.html
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: background-size
-slug: Web/CSS/background-size
-translation_of: Web/CSS/background-size
----
-{{CSSRef}}
-
-Описание
-
-Значение background-sizeCSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
-
-Предупреждение: Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS-свойства background-size, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* Ключевые слова */
-background-size: cover;
-background-size: contain;
-
-/* Указано одно значение - ширина изображения, */
-/* высота в таком случае устанавливается в auto */
-background-size: 50%;
-background-size: 3em;
-background-size: 12px;
-background-size: auto;
-
-/* Указаны два значения - */
-/* ширина и высота соответственно */
-background-size: 50% auto;
-background-size: 3em 25%;
-background-size: auto 6px;
-background-size: auto auto;
-
-/* Значения для нескольких фонов */
-/* Не путайте такую запись с background-size: auto auto */
-background-size: auto, auto;
-background-size: 50%, 25%, 25%;
-background-size: 6px, auto, contain;
-
-/* Глобальные значения */
-background-size: inherit;
-background-size: initial;
-background-size: unset;
-
-
-Значения
-
-
- <размер>Значение {{cssxref("<length>")}} позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.
- <проценты>Значение {{cssxref("<percentage>")}}, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением {{cssxref("background-origin")}}. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если {{cssxref("background-attachment","attachment")}} фона является fixed, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
- autoЗначение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.
- containМасштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.
- coverКлючевое слово, обратное contain. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, изображение обрезается либо влево / вправо, либо сверху / снизу.
-
-
-Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
-
-
-
Предупреждение: Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
-
Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
-
-Предупреждение: Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
-
-Визуализированный размер фонового изображения затем вычисляется следующим способом:
-
-
- Если оба атрибута в background-size заданы и различны от auto:Фоновое изображение отображается в указанном размере.
- Если background-size содержит contain или cover:
- Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
- Если background-size установлен как auto или auto auto:
- Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан contain. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
- Если background-size содержит один атрибут auto и один не-auto:
- Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
-
-
-Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Эта демонстрация background-size: cover и эта демонстрация background-size: contain предназначены для открытия в новых окнах, чтобы вы могли видеть, как contain и cover ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает background-size и взаимодействует с другими свойствами background-* , должна в значительной степени охватить оставшуюся основу в том, как использовать background-size отдельно и в сочетании с другими свойствами.
-
-Замечания
-
-Если вы указываете градиент в качестве фона и указали background-size, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, background-size: 50%). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией background-size и с CSS3 спецификацией градиента значений изображения .
-
-.bar {
- width: 50px; height: 100px;
- background-image: gradient(...);
-
- /* Лучше не использовать */
- background-size: 25px;
- background-size: 50%;
- background-size: auto 50px;
- background-size: auto 50%;
-
- /* Допускается */
- background-size: 25px 50px;
- background-size: 50% 50%;
-}
-
-
-Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер auto с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/background-size/index.md b/files/ru/web/css/background-size/index.md
new file mode 100644
index 00000000000000..f531d67319d0f6
--- /dev/null
+++ b/files/ru/web/css/background-size/index.md
@@ -0,0 +1,126 @@
+---
+title: background-size
+slug: Web/CSS/background-size
+translation_of: Web/CSS/background-size
+---
+{{CSSRef}}
+
+## Описание
+
+Значение **`background-size`** в [CSS](/ru/docs/CSS "CSS") позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.
+
+> **Примечание:** **Предупреждение:** Если значение этого свойства не задано в сокращённом свойстве {{cssxref("background")}}, которое применяется к элементу после CSS-свойства `background-size`, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* Ключевые слова */
+background-size: cover;
+background-size: contain;
+
+/* Указано одно значение - ширина изображения, */
+/* высота в таком случае устанавливается в auto */
+background-size: 50%;
+background-size: 3em;
+background-size: 12px;
+background-size: auto;
+
+/* Указаны два значения - */
+/* ширина и высота соответственно */
+background-size: 50% auto;
+background-size: 3em 25%;
+background-size: auto 6px;
+background-size: auto auto;
+
+/* Значения для нескольких фонов */
+/* Не путайте такую запись с background-size: auto auto */
+background-size: auto, auto;
+background-size: 50%, 25%, 25%;
+background-size: 6px, auto, contain;
+
+/* Глобальные значения */
+background-size: inherit;
+background-size: initial;
+background-size: unset;
+```
+
+### Значения
+
+- `<размер>`
+ - : Значение `{{cssxref("<length>")}}` позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.
+- `<проценты>`
+ - : Значение `{{cssxref("<percentage>")}}`, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением {{cssxref("background-origin")}}. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если {{cssxref("background-attachment","attachment")}} фона является `fixed`, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.
+- `auto`
+ - : Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.
+- `contain`
+ - : Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.
+- `cover`
+ - : Ключевое слово, обратное `contain`. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, _изображение обрезается_ либо влево / вправо, либо сверху / снизу.
+
+Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.
+
+> **Примечание:** **Предупреждение:** Это поведение изменилось в Gecko 8.0 {{geckoRelease("8.0")}}. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.
+
+Фоновые изображения, сгенерированные из элементов с использованием {{cssxref("-moz-element")}} (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.
+
+> **Примечание:** **Предупреждение:** Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.
+
+Визуализированный размер фонового изображения затем вычисляется следующим способом:
+
+- Если оба атрибута в `background-size` заданы и различны от `auto`:
+ - : Фоновое изображение отображается в указанном размере.
+- Если `background-size` содержит `contain` или `cover`:
+ - : Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.
+- Если `background-size` установлен как `auto` или `auto auto`:
+ - : Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан `contain`. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.
+- Если background-size содержит один атрибут `auto` и один не-`auto`:
+ - : Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.
+
+Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+[Эта демонстрация `background-size: cover`](http://whereswalden.com/files/mozilla/background-size/page-cover.html) и [эта демонстрация `background-size: contain`](http://whereswalden.com/files/mozilla/background-size/page-contain.html) предназначены для открытия в новых окнах, чтобы вы могли видеть, как `contain` и `cover` ведут себя, когда размеры области расположения фона изменяются. [Эта серия демонстраций, как работает `background-size` и взаимодействует с другими свойствами `background-*`](http://whereswalden.com/files/mozilla/background-size/more-examples.html), должна в значительной степени охватить оставшуюся основу в том, как использовать `background-size` отдельно и в сочетании с другими свойствами.
+
+## Замечания
+
+Если вы указываете градиент в качестве фона и указали `background-size`, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, `background-size: 50%`). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с [CSS3 спецификацией `background-size` ](http://www.w3.org/TR/css3-background/#the-background-size)и с [CSS3 спецификацией градиента значений изображения](http://dev.w3.org/csswg/css3-images/#gradients).
+
+```css
+.bar {
+ width: 50px; height: 100px;
+ background-image: gradient(...);
+
+ /* Лучше не использовать */
+ background-size: 25px;
+ background-size: 50%;
+ background-size: auto 50px;
+ background-size: auto 50%;
+
+ /* Допускается */
+ background-size: 25px 50px;
+ background-size: 50% 50%;
+}
+```
+
+Обратите внимание, что особенно не рекомендуется использовать размер в пикселях и размер `auto` с градиентом, потому что невозможно воспроизвести рендеринг в версиях Firefox до 8 и в браузерах, не реализующих рендеринг Firefox 8, без знания точного размера элемента, фон которого указывается.
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Справочник по CSS](/ru/docs/CSS/CSS_Reference "CSS Reference")
+- [Несколько фонов](/ru/docs/CSS/Multiple_backgrounds "CSS/Multiple backgrounds")
+- [Масштабирование фонового изображения](/ru/docs/CSS/Scaling_background_images "CSS/Scaling_background_images")
diff --git a/files/ru/web/css/background/index.html b/files/ru/web/css/background/index.html
deleted file mode 100644
index 37fdc11a6a93e3..00000000000000
--- a/files/ru/web/css/background/index.html
+++ /dev/null
@@ -1,106 +0,0 @@
----
-title: background
-slug: Web/CSS/background
-translation_of: Web/CSS/background
----
-{{CSSRef("CSS Background")}}
-
-Сокращённое
CSS свойство
background устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.
{{EmbedInteractiveExample("pages/css/background.html")}}
-
-Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..
-
-Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.
-
-Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои изначальные значения .
-
-
-
-Синтаксис
-
-/* Использование свойства <background-color> */
-background: green;
-
-/* Использование свойств <bg-image> и <repeat-style> */
-background: url("test.jpg") repeat-y;
-
-/* Использование <box> и <background-color> */
-background: border-box red;
-
-/* Одно изображение, центрированное и масштабированное */
-background: no-repeat center/80% url("../img/image.png");
-
-
-Предупреждение: {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.
-
-Значения
-
-Свойству можно указывать одно или более значений из данного списка в любом порядке:
-
-
- <attachment>Смотри {{cssxref("background-attachment")}}
- <box>Смотри {{cssxref("background-clip")}}
- <background-color>Смотри {{cssxref("background-color")}}
- <bg-image>Смотри {{Cssxref("background-image")}}
- <position>Смотри {{cssxref("background-position")}}
- <repeat-style>Смотри {{cssxref("background-repeat")}}
- <bg-size>Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после <position> , разделённого символом '/'.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML
-
-<p class="topbanner">
- Starry sky<br/>
- Twinkle twinkle<br/>
- Starry sky
-</p>
-<p class="warning">Here is a paragraph<p>
-
-CSS
-
-.warning {
- background: red;
-}
-
-.topbanner {
- background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
-}
-
-
-Результат
-
-{{EmbedLiveSample("Примеры")}}
-
-Спецификации
-
-{{Specifications}}
-
-{cssinfo}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/background/index.md b/files/ru/web/css/background/index.md
new file mode 100644
index 00000000000000..3d8c24359762e3
--- /dev/null
+++ b/files/ru/web/css/background/index.md
@@ -0,0 +1,98 @@
+---
+title: background
+slug: Web/CSS/background
+translation_of: Web/CSS/background
+---
+{{CSSRef("CSS Background")}}Сокращённое [CSS](/ru/docs/Web/CSS) свойство **`background`** устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.{{EmbedInteractiveExample("pages/css/background.html")}}
+
+Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте и отправьте нам запрос на извлечение..
+
+Свойство является [сокращением,](/ru/docs/Web/CSS/Shorthand_properties) которое устанавливает следующие свойства в одном объявлении: {{cssxref("background-clip")}}, {{cssxref("background-color")}}, {{cssxref("background-image")}}, {{cssxref("background-origin")}}, {{cssxref("background-position")}}, {{cssxref("background-repeat")}}, {{cssxref("background-size")}}, и {{cssxref("background-attachment")}}.
+
+Как и во всех сокращённых свойствах, любые пропущенные вложенные значения будут установлены в свои [изначальные значения](/ru/docs/Web/CSS/initial_value).
+
+## Синтаксис
+
+```css
+/* Использование свойства */
+background: green;
+
+/* Использование свойств и */
+background: url("test.jpg") repeat-y;
+
+/* Использование и */
+background: border-box red;
+
+/* Одно изображение, центрированное и масштабированное */
+background: no-repeat center/80% url("../img/image.png");
+```
+
+> **Примечание:** **Предупреждение:** {{cssxref("background-color")}} можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.
+
+### Значения
+
+Свойству можно указывать одно или более значений из данного списка в любом порядке:
+
+- ``
+ - : Смотри {{cssxref("background-attachment")}}
+- ``
+ - : Смотри {{cssxref("background-clip")}}
+- ``
+ - : Смотри {{cssxref("background-color")}}
+- ``
+ - : Смотри {{Cssxref("background-image")}}
+- ``
+ - : Смотри {{cssxref("background-position")}}
+- ``
+ - : Смотри {{cssxref("background-repeat")}}
+- ``
+ - : Смотри {{cssxref("background-size")}}. Это свойство должно быть указано после **\**, разделённого символом '/'.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### HTML
+
+```html
+
+ Starry sky
+Here is a paragraph
+```
+
+### CSS
+
+```css
+.warning {
+ background: red;
+}
+
+.topbanner {
+ background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #00D repeat-y fixed;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample("Примеры")}}
+
+## Спецификации
+
+{{Specifications}}
+
+{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("-moz-background-inline-policy")}}
+- [Использование градиентов](/ru/docs/CSS/Using_CSS_gradients)
+- [Несколько backgrounds](/ru/docs/CSS/Multiple_backgrounds)
diff --git a/files/ru/web/css/blend-mode/index.html b/files/ru/web/css/blend-mode/index.html
deleted file mode 100644
index 96c6f440fdae4a..00000000000000
--- a/files/ru/web/css/blend-mode/index.html
+++ /dev/null
@@ -1,347 +0,0 @@
----
-title:
-slug: Web/CSS/blend-mode
-translation_of: Web/CSS/blend-mode
----
-{{CSSRef}}
-
-Описание
-
-The <blend-mode>
-
-A blend mode is a method of calculating the final color value of a pixel when layers overlap. Each blend mode takes the color value of the foreground and the backdrop (top color and bottom color respectively), perfoms its calculation and returns a color value. The final, visible layer is the result of performing the blend mode calculation on every overlapping pixel among the blended layers.
-
-Синтаксис
-
-Формальный синтаксис: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity
-
-Возможные значения
-
-
- normal
- The final color is the top color, whatever the bottom color may be.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: normal;
-}
-
{{ EmbedLiveSample('normal', "300", "300") }}
-
- multiply
- The final color is the result of multiplying the top and bottom colors.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: multiply;
-}
-
{{ EmbedLiveSample('multiply', "300", "300") }}
-
- screen
- The final color is the result of inverting the colors, multiplying them and inverting that color value.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: screen;
-}
-
{{ EmbedLiveSample('screen', "300", "300") }}
-
- overlayThe final color is the result of multiply if the bottom color is darker, or screen if the bottom color is lighter.hard-light but with the layers swapped.
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: overlay;
-}
-
{{ EmbedLiveSample('overlay', "300", "300") }}
-
- darken
- The final color is a color composed of the darkest values per color channel.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: darken;
-}
-
{{ EmbedLiveSample('darken', "300", "300") }}
-
- lighten
- The final color is a color composed of the lightest values per color channel.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: lighten;
-}
-
{{ EmbedLiveSample('lighten', "300", "300") }}
-
- color-dodge
- The final color is the result of dividing the bottom color by the inverse of the top color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color-dodge;
-}
-
{{ EmbedLiveSample('color-dodge', "300", "300") }}
-
- color-burn
- This final color is the result of inverting the bottom color, dividing the value by the top color, and inverting that value.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color-burn;
-}
-
{{ EmbedLiveSample('color-burn', "300", "300") }}
-
- hard-light
- The final color is the result of multiply if the top color is darker, or screen if the top color is lighter.overlay but with the layers swapped.harsh spotlight on the backdrop.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: hard-light;
-}
-
{{ EmbedLiveSample('hard-light', "300", "300") }}
-
- soft-light
- The final color is similar to hard-light, but softer.hard-light.diffused spotlight on the backdrop.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: soft-light;
-}
-
{{ EmbedLiveSample('soft-light', "300", "300") }}
-
- difference
- The final color is the result of subtracting the darker of the two colors from the lighter one.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: difference;
-}
-
{{ EmbedLiveSample('difference', "300", "300") }}
-
- exclusion
- The final color is similar to difference, but with less contrast.difference, a black layer has no effect, while a white layer inverts the other layer's color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: exclusion;
-}
-
{{ EmbedLiveSample('exclusion', "300", "300") }}
-
- hue
- The final color has the hue of the top color, while using the saturation and luminosity of the bottom color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: hue;
-}
-
{{ EmbedLiveSample('hue', "300", "300") }}
-
- saturation
- The final color has the saturation of the top color, while using the hue and luminosity of the bottom color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: saturation;
-}
-
{{ EmbedLiveSample('saturation', "300", "300") }}
-
- color
- The final color has the hue and saturation luminosity of the bottom color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: color;
-}
-
{{ EmbedLiveSample('color', "300", "300") }}
-
- luminosity
- The final color has the luminosity of the top color, while using the hue and saturation of the bottom color.
-
-
-
-
#div {
- width: 300px;
- height: 300px;
- background: url('https://mdn.mozillademos.org/files/8543/br.png'),
- url('https://mdn.mozillademos.org/files/8545/tr.png');
- background-blend-mode: luminosity;
-}
-
{{ EmbedLiveSample('luminosity', "300", "300") }}
-
-
-
-Интерполяция режимов наложения
-
-Changes between blends mode are not interpolated. Any change occurs abruptly.
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{ SpecName('Compositing', '#ltblendmodegt', '<blend-mode>') }}
- {{ Spec2('Compositing') }}
- Первоначальное определение
-
-
-
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
- Properties using a value of this type: {{cssxref("background-blend-mode")}} and {{cssxref("mix-blend-mode")}}
- Blend modes CSS Reference index
diff --git a/files/ru/web/css/block-size/index.html b/files/ru/web/css/block-size/index.html
deleted file mode 100644
index e2ebfc8096ed97..00000000000000
--- a/files/ru/web/css/block-size/index.html
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: block-size
-slug: Web/CSS/block-size
-tags:
- - CSS
- - CSS Logical Property
- - CSS Property
- - Experimental
- - Reference
- - Справка
- - Экспериментальный
-translation_of: Web/CSS/block-size
----
-{{CSSRef}}{{SeeCompatTable}}
-
-Свойство block-sizeCSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.
-
-/* <length> values */
-block-size: 300px;
-block-size: 25em;
-
-/* <percentage> values */
-block-size: 75%;
-
-/* Keyword values */
-block-size: 25em border-box;
-block-size: 75% content-box;
-block-size: max-content;
-block-size: min-content;
-block-size: available;
-block-size: fit-content;
-block-size: auto;
-
-/* Global values */
-block-size: inherit;
-block-size: initial;
-block-size: unset;
-
-
-Если режим записи (writing mode) ориентирован по вертикали, то значение block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.
-
-{{cssinfo}}
-
-СинтаксисЗначенияСвойство block-size принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}}
-
-Формальный синтаксис
-{{csssyntax}}ПримерHTML
-<p class="exampleText">Example text</p>
-CSS
-.exampleText {
- writing-mode: vertical-rl;
- background-color: yellow;
- block-size: 200px;
-}{{EmbedLiveSample("Пример")}}
-
-Спецификация
-
-
- SpecificationStatusComment
-
-
-
- {{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}{{Spec2("CSS Logical Properties")}}Initial definition
-
-
-
-Совместимость с браузерами{{Compat}}
-
-Смотрите также
- Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}{{cssxref("writing-mode")}}
diff --git a/files/ru/web/css/block-size/index.md b/files/ru/web/css/block-size/index.md
new file mode 100644
index 00000000000000..dab417d3f840cc
--- /dev/null
+++ b/files/ru/web/css/block-size/index.md
@@ -0,0 +1,93 @@
+---
+title: block-size
+slug: Web/CSS/block-size
+tags:
+ - CSS
+ - CSS Logical Property
+ - CSS Property
+ - Experimental
+ - Reference
+ - Справка
+ - Экспериментальный
+translation_of: Web/CSS/block-size
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+Свойство **`block-size`** [CSS](/ru/docs/Web/CSS "CSS") задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам {{cssxref("width")}} и {{cssxref("height")}} и зависит от значения свойства {{cssxref("writing-mode")}}.
+
+```css
+/* values */
+block-size: 300px;
+block-size: 25em;
+
+/* values */
+block-size: 75%;
+
+/* Keyword values */
+block-size: 25em border-box;
+block-size: 75% content-box;
+block-size: max-content;
+block-size: min-content;
+block-size: available;
+block-size: fit-content;
+block-size: auto;
+
+/* Global values */
+block-size: inherit;
+block-size: initial;
+block-size: unset;
+```
+
+Если режим записи (writing mode) ориентирован по вертикали, то значение `block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство {{cssxref("inline-size")}}, которое задаёт другое измерение элемента.`
+
+`{{cssinfo}}`
+
+## `Синтаксис`
+
+### `Значения`
+
+`Свойство block-size принимает те же значения, что и свойства {{cssxref("width")}}, {{cssxref("height")}}`
+
+### `Формальный синтаксис`
+
+```
+
+{{csssyntax}}
+```
+
+## `Пример`
+
+### `HTML`
+
+```html
+
+Example text
+```
+
+### `CSS`
+
+```css
+
+.exampleText {
+ writing-mode: vertical-rl;
+ background-color: yellow;
+ block-size: 200px;
+}
+```
+
+`{{EmbedLiveSample("Пример")}}`
+
+## `Спецификация`
+
+| `Specification` | `Status` | `Comment` |
+| ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------- | -------------------- |
+| `{{SpecName("CSS Logical Properties", "#logical-dimension-properties", "block-size")}}` | `{{Spec2("CSS Logical Properties")}}` | `Initial definition` |
+
+## `Совместимость с браузерами`
+
+`{{Compat}}`
+
+## `Смотрите также`
+
+- `Отображаемые физические свойства: {{cssxref("width")}} and {{cssxref("height")}}`
+- `{{cssxref("writing-mode")}}`
diff --git a/files/ru/web/css/border-bottom/index.html b/files/ru/web/css/border-bottom/index.html
deleted file mode 100644
index 3f5c3ebad7f72f..00000000000000
--- a/files/ru/web/css/border-bottom/index.html
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: border-bottom
-slug: Web/CSS/border-bottom
-translation_of: Web/CSS/border-bottom
----
-{{CSSRef}}
-
-Сокращённое свойство CSS border-bottom border .
-
-{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
-
-
-
-Как и все сокращённые свойства, border-bottom устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...
-
-border-bottom-style: dotted;
-border-bottom: thick green;
-
-
-... это то же самое, что ...
-
-border-bottom-style: dotted;
-border-bottom: none thick green;
-
-
-... и значение {{cssxref("border-bottom-style")}}, указанное перед border-bottom игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является none, то без указания border-style граница не будет показана.
-
-Constituent properties
-
-This property is a shorthand for the following CSS properties:
-
-
-
-Syntax
-
-border-bottom: 1px;
-border-bottom: 2px dotted;
-border-bottom: medium dashed blue;
-
-
-The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
-
-Values
-
-
- <br-width>See {{cssxref("border-bottom-width")}}.
- <br-style>See {{cssxref("border-bottom-style")}}.
- {{cssxref("<color>")}}
- See {{cssxref("border-bottom-color")}}.
-
-
-
-
-{{CSSInfo}}
-
-
-
-{{csssyntax}}
-
-Examples
-
-Applying a bottom border
-
-HTML
-
-<div>
- This box has a border on the bottom side.
-</div>
-
-CSS
-
-div {
- border-bottom: 4px dashed blue;
- background-color: gold;
- height: 100px;
- width: 100px;
- font-weight: bold;
- text-align: center;
-}
-
-
-Results
-
-{{EmbedLiveSample('Applying_a_bottom_border')}}
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#propdef-border-bottom', 'border-bottom')}}
- {{Spec2('CSS3 Backgrounds')}}
- No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it.
-
-
- {{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}}
- {{Spec2('CSS2.1')}}
- No significant changes.
-
-
- {{SpecName('CSS1', '#border-bottom', 'border-bottom')}}
- {{Spec2('CSS1')}}
- Initial definition
-
-
-
-
-Browser compatibility
-
-{{Compat}}
-
-See also
-
-
diff --git a/files/ru/web/css/border-bottom/index.md b/files/ru/web/css/border-bottom/index.md
new file mode 100644
index 00000000000000..1a3c8fa74aca3a
--- /dev/null
+++ b/files/ru/web/css/border-bottom/index.md
@@ -0,0 +1,108 @@
+---
+title: border-bottom
+slug: Web/CSS/border-bottom
+translation_of: Web/CSS/border-bottom
+---
+{{CSSRef}}
+
+[Сокращённое свойство ](/ru/docs/Web/CSS/Shorthand_properties)[CSS](/ru/docs/Web/CSS) **`border-bottom `**описывает нижнюю границу элемента [border](/ru/docs/Web/CSS/border). Оно устанавливает значения {{cssxref("border-bottom-width")}}, {{cssxref("border-bottom-style")}} и {{cssxref("border-bottom-color")}}.
+
+{{EmbedInteractiveExample("pages/css/border-bottom.html")}}
+
+Как и все сокращённые свойства, `border-bottom` устанавливает значения всех свойств, которые он может установить, даже если они не указаны. Для тех свойств, которые не указаны оно устанавливает значения по умолчанию. Это означает, что ...
+
+```css
+border-bottom-style: dotted;
+border-bottom: thick green;
+```
+
+... это то же самое, что ...
+
+```css
+border-bottom-style: dotted;
+border-bottom: none thick green;
+```
+
+... и значение {{cssxref("border-bottom-style")}}, указанное перед `border-bottom` игнорируется. Поскольку значением по умолчанию для {{cssxref("border-bottom-style")}} является `none`, то без указания `border-style` граница не будет показана.
+
+## Constituent properties
+
+This property is a shorthand for the following CSS properties:
+
+- [`border-bottom-color`](/ru/docs/Web/CSS/border-bottom-color)
+- [`border-bottom-style`](/ru/docs/Web/CSS/border-bottom-style)
+- [`border-bottom-width`](/ru/docs/Web/CSS/border-bottom-width)
+
+## Syntax
+
+```css
+border-bottom: 1px;
+border-bottom: 2px dotted;
+border-bottom: medium dashed blue;
+```
+
+The three values of the shorthand property can be specified in any order, and one or two of them may be omitted.
+
+### Values
+
+- ``
+ - : See {{cssxref("border-bottom-width")}}.
+- ``
+ - : See {{cssxref("border-bottom-style")}}.
+- {{cssxref("<color>")}}
+ - : See {{cssxref("border-bottom-color")}}.
+
+## Formal definition
+
+{{CSSInfo}}
+
+## Formal syntax
+
+{{csssyntax}}
+
+## Examples
+
+### Applying a bottom border
+
+#### HTML
+
+```html
+
+ This box has a border on the bottom side.
+
+```
+
+#### CSS
+
+```css
+div {
+ border-bottom: 4px dashed blue;
+ background-color: gold;
+ height: 100px;
+ width: 100px;
+ font-weight: bold;
+ text-align: center;
+}
+```
+
+#### Results
+
+{{EmbedLiveSample('Applying_a_bottom_border')}}
+
+## Specifications
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#propdef-border-bottom', 'border-bottom')}} | {{Spec2('CSS3 Backgrounds')}} | No direct changes, though the modification of values for the {{cssxref("border-bottom-color")}} do apply to it. |
+| {{SpecName('CSS2.1', 'box.html#propdef-border-bottom', 'border-bottom')}} | {{Spec2('CSS2.1')}} | No significant changes. |
+| {{SpecName('CSS1', '#border-bottom', 'border-bottom')}} | {{Spec2('CSS1')}} | Initial definition |
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- [`border`](/en-US/docs/Web/CSS/border)
+- [`border-block`](/en-US/docs/Web/CSS/border-block)
+- [`outline`](/en-US/docs/Web/CSS/outline)
diff --git a/files/ru/web/css/border-image-outset/index.html b/files/ru/web/css/border-image-outset/index.html
deleted file mode 100644
index e5327a3fe4ce59..00000000000000
--- a/files/ru/web/css/border-image-outset/index.html
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: border-image-outset
-slug: Web/CSS/border-image-outset
-translation_of: Web/CSS/border-image-outset
----
-{{CSSRef}}
-
-Описание
-
-The border-image-outsetborder image area extends beyond the border box.
-
-Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* border-image-outset: sides */
-border-image-outset: 1.5;
-
-/* border-image-outset: vertical horizontal */
-border-image-outset: 1 1.2;
-
-/* border-image-outset: top horizontal bottom */
-border-image-outset: 30px 2 45px;
-
-/* border-image-outset: top right bottom left */
-border-image-outset: 7px 12px 14px 5px;
-
-border-image-repeat: inherit;
-
-
-Значения
-
-
-
When a value is specified as a unitless {{cssxref("<number>")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the border-image-outset. Negative values are invalid.
-
- sides Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in all four directions.
- horizontal Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).
- vertical Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).
- top Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its top edge.
- bottom Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its bottom edge.
- right Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its right edge.
- left Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its left edge.
- inheritIs a keyword indicating that all four values are inherited from each parent elements' calculated value.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/border-image-outset/index.md b/files/ru/web/css/border-image-outset/index.md
new file mode 100644
index 00000000000000..8f98054a82655b
--- /dev/null
+++ b/files/ru/web/css/border-image-outset/index.md
@@ -0,0 +1,65 @@
+---
+title: border-image-outset
+slug: Web/CSS/border-image-outset
+translation_of: Web/CSS/border-image-outset
+---
+{{CSSRef}}
+
+## Описание
+
+The **`border-image-outset`** property describes by what amount the _border image area_ extends beyond the border box.
+
+Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* border-image-outset: sides */
+border-image-outset: 1.5;
+
+/* border-image-outset: vertical horizontal */
+border-image-outset: 1 1.2;
+
+/* border-image-outset: top horizontal bottom */
+border-image-outset: 30px 2 45px;
+
+/* border-image-outset: top right bottom left */
+border-image-outset: 7px 12px 14px 5px;
+
+border-image-repeat: inherit;
+```
+
+### Значения
+
+> **Примечание:** When a value is specified as a unitless {{cssxref("<number>")}}, that value is multiplied by the corresponding computed {{cssxref("border-width")}} to determine the `border-image-outset`. Negative values are invalid.
+
+- _sides_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in all four directions.
+- _horizontal_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).
+- _vertical_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).
+- _top_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its top edge.
+- _bottom_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its bottom edge.
+- _right_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its right edge.
+- _left_
+ - : Is a {{cssxref("<length>")}} or a {{cssxref("<number>")}} of the amount by which the border image area extends beyond the border box past its left edge.
+- `inherit`
+ - : Is a keyword indicating that all four values are inherited from each parent elements' calculated value.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/border-image-repeat/index.html b/files/ru/web/css/border-image-repeat/index.html
deleted file mode 100644
index b3eb667eb27ba8..00000000000000
--- a/files/ru/web/css/border-image-repeat/index.html
+++ /dev/null
@@ -1,67 +0,0 @@
----
-title: border-image-repeat
-slug: Web/CSS/border-image-repeat
-translation_of: Web/CSS/border-image-repeat
----
-{{CSSRef}}
-
-Описание
-
-The border-image-repeat
-
-{{cssinfo}}
-
-Синтаксис
-
-/* border-image-repeat: type */
-border-image-value: stretch;
-
-/* border-image-repeat: horizontal vertical */
-border-image-width: round stretch;
-
-/* Глобальные значения */
-border-image-repeat: inherit;
-border-image-repeat: initial;
-border-image-repeat: unset;
-
-
-Значения
-
-
- type One of the stretch, repeat, or round keywords denoting how the image is treated both horizontally and vertically.
- horizontal One of the stretch, repeat, or round keywords denoting how the image is treated horizontally.
- vertical One of the stretch, repeat, or round keywords denoting how the image is treated vertically.
- stretchKeyword indicating that the image must be stretched to fill the gap between the two borders.
- repeatKeyword indicating that the image must be repeated until it fills the gap between the two borders.
- roundKeyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
- spaceThe image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-See {{cssxref("border-image")}} for examples of what repeat values will do.
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/border-image-repeat/index.md b/files/ru/web/css/border-image-repeat/index.md
new file mode 100644
index 00000000000000..06f7eceed18108
--- /dev/null
+++ b/files/ru/web/css/border-image-repeat/index.md
@@ -0,0 +1,64 @@
+---
+title: border-image-repeat
+slug: Web/CSS/border-image-repeat
+translation_of: Web/CSS/border-image-repeat
+---
+{{CSSRef}}
+
+## Описание
+
+The **`border-image-repeat`** CSS property defines how the middle part of a border image is handled so that it can match the size of the border. It has a one-value syntax that describes the behavior of all the sides, and a two-value syntax that sets a different value for the horizontal and vertical behavior.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* border-image-repeat: type */
+border-image-value: stretch;
+
+/* border-image-repeat: horizontal vertical */
+border-image-width: round stretch;
+
+/* Глобальные значения */
+border-image-repeat: inherit;
+border-image-repeat: initial;
+border-image-repeat: unset;
+```
+
+### Значения
+
+- _type_
+ - : One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated both horizontally and vertically.
+- _horizontal_
+ - : One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated horizontally.
+- _vertical_
+ - : One of the `stretch`, `repeat`, or `round` keywords denoting how the image is treated vertically.
+- `stretch`
+ - : Keyword indicating that the image must be stretched to fill the gap between the two borders.
+- `repeat`
+ - : Keyword indicating that the image must be repeated until it fills the gap between the two borders.
+- `round`
+ - : Keyword indicating that the image must be repeated until it fills the gap between the two borders. If the image doesn't fit after being repeated for an integral number of times, the image is rescaled to fit.
+- `space`
+ - : The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+See {{cssxref("border-image")}} for examples of what repeat values will do.
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [css-tricks border-image](https://css-tricks.com/almanac/properties/b/border-image/)
diff --git a/files/ru/web/css/border-image-slice/index.html b/files/ru/web/css/border-image-slice/index.html
deleted file mode 100644
index fd507e0644b8c8..00000000000000
--- a/files/ru/web/css/border-image-slice/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: border-image-slice
-slug: Web/CSS/border-image-slice
-translation_of: Web/CSS/border-image-slice
----
-{{CSSRef}}
-
-Описание
-
-CSS-свойство border-image-slice
-
-
-
-The middle is not used by the border itself but is used as a background-image if the keyword fill is set. The keyword can be set at any position in the property (before, after or between the other values).
-
-The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.
-
-The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* border-image-slice: slice */
-border-image-slice: 30%;
-
-/* border-image-slice: horizontal vertical */
-border-image-slice: 10% 30%;
-
-/* border-image-slice: top horizontal bottom */
-border-image-slice: 30 30% 45;
-
-/* border-image-slice: top right bottom left */
-border-image-slice: 7 12 14 5;
-
-/* border-image-slice: … fill */
-/* The fill value can be placed between any value */
-border-image-slice: 10% fill 7 12;
-
-/* Глобальные значения */
-border-image-slice: inherit;
-border-image-slice: initial;
-border-image-slice: unset;
-
-
-Значения
-
-
- slice Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- horizontal Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- vertical Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- top Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- bottom Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- right Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- left Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents pixels for raster images and coordinates for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to 100%.
- fillIs a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
- inheritIs a keyword indicating that all four values are inherited from their parent's element calculated value.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/border-image-slice/index.md b/files/ru/web/css/border-image-slice/index.md
new file mode 100644
index 00000000000000..6da7809763ec0d
--- /dev/null
+++ b/files/ru/web/css/border-image-slice/index.md
@@ -0,0 +1,78 @@
+---
+title: border-image-slice
+slug: Web/CSS/border-image-slice
+translation_of: Web/CSS/border-image-slice
+---
+{{CSSRef}}
+
+## Описание
+
+CSS-свойство **`border-image-slice`** делит изображение указанное в {{cssxref("border-image-source")}} на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.
+
+[](/files/3814/border-image-slice.png)Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.
+
+The middle is not used by the border itself but is used as a background-image if the keyword `fill` is set. The keyword can be set at any position in the property (before, after or between the other values).
+
+The {{cssxref("border-image-repeat")}}, {{cssxref("border-image-width")}}, {{cssxref("border-image-outset")}} properties define how these images will be used.
+
+The shorthand CSS property {{cssxref("border-image")}} may reset this property to its default value.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* border-image-slice: slice */
+border-image-slice: 30%;
+
+/* border-image-slice: horizontal vertical */
+border-image-slice: 10% 30%;
+
+/* border-image-slice: top horizontal bottom */
+border-image-slice: 30 30% 45;
+
+/* border-image-slice: top right bottom left */
+border-image-slice: 7 12 14 5;
+
+/* border-image-slice: … fill */
+/* The fill value can be placed between any value */
+border-image-slice: 10% fill 7 12;
+
+/* Глобальные значения */
+border-image-slice: inherit;
+border-image-slice: initial;
+border-image-slice: unset;
+```
+
+### Значения
+
+- _slice_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the four slicing lines. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _horizontal_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _vertical_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the two vertical slicing lines, the right and the left ones. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _top_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the top slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _bottom_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the bottom slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _right_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the right slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- _left_
+ - : Is a {{cssxref("<number>")}} or a {{cssxref("<percentage>")}} of the offset for the left slicing line. Note that a {{cssxref("<length>")}} value is not allowed, and therefore invalid. The {{cssxref("<number>")}} represents _pixels_ for raster images and _coordinates_ for vector images. Also, {{cssxref("<percentage>")}} values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.
+- `fill`
+ - : Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.
+- `inherit`
+ - : Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/border-image-source/index.html b/files/ru/web/css/border-image-source/index.html
deleted file mode 100644
index 8835c9c4b4b7b6..00000000000000
--- a/files/ru/web/css/border-image-source/index.html
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: border-image-source
-slug: Web/CSS/border-image-source
-translation_of: Web/CSS/border-image-source
----
-{{CSSRef}}
-
-Описание
-
-The border-image-sourcenone, the style defined by {{cssxref("border-style")}} is used instead.
-
-Предупреждение: Though any {{cssxref("<image>")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the url() functional notation.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* no border-image, use the specified border-style */
-border-image-source: none;
-
-/* the image.jpg is used as image */
-border-image-source: url(image.jpg);
-
-/* a gradient is used as image */
-border-image-source: linear-gradient(to top, red, yellow);
-
-/* Global values */
-border-image-source: inherit;
-border-image-source: initial;
-border-image-source: unset;
-
-
-Значения
-
-
- noneSpecifies that no image should be used for the border. Instead the style defined by {{cssxref("border-style")}} is used.
- <image>Ссылка на изображение, которое будет использоваться в отрисовке границы.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-See {{cssxref("border-image")}} for examples of what the various source values will do.
-
-Спецификации
-
-{{Specifications}}
-
-Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/border-image-source/index.md b/files/ru/web/css/border-image-source/index.md
new file mode 100644
index 00000000000000..5ecceac23cef60
--- /dev/null
+++ b/files/ru/web/css/border-image-source/index.md
@@ -0,0 +1,55 @@
+---
+title: border-image-source
+slug: Web/CSS/border-image-source
+translation_of: Web/CSS/border-image-source
+---
+{{CSSRef}}
+
+## Описание
+
+The **`border-image-source`** CSS property defines the {{cssxref("<image>")}} to use instead of the style of the border. If this property is set to `none`, the style defined by {{cssxref("border-style")}} is used instead.
+
+> **Примечание:** **Предупреждение:** Though any {{cssxref("<image>")}} can be used with this CSS property, browser support is still limited and some browsers support only images defined using the `url()` functional notation.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* no border-image, use the specified border-style */
+border-image-source: none;
+
+/* the image.jpg is used as image */
+border-image-source: url(image.jpg);
+
+/* a gradient is used as image */
+border-image-source: linear-gradient(to top, red, yellow);
+
+/* Global values */
+border-image-source: inherit;
+border-image-source: initial;
+border-image-source: unset;
+```
+
+### Значения
+
+- `none`
+ - : Specifies that no image should be used for the border. Instead the style defined by {{cssxref("border-style")}} is used.
+- ``
+ - : Ссылка на изображение, которое будет использоваться в отрисовке границы.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+See {{cssxref("border-image")}} for examples of what the various source values will do.
+
+## Спецификации
+
+{{Specifications}}
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/border-image-width/index.html b/files/ru/web/css/border-image-width/index.html
deleted file mode 100644
index c78232c30301e7..00000000000000
--- a/files/ru/web/css/border-image-width/index.html
+++ /dev/null
@@ -1,122 +0,0 @@
----
-title: border-image-width
-slug: Web/CSS/border-image-width
-translation_of: Web/CSS/border-image-width
----
-{{CSSRef}}
-
-Описание
-
-he border-image-widthborder-image-width is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.
-
-{{cssinfo}}
-
-Синтаксис
-
-/* border-image-width: all */
-border-image-width: 3;
-
-/* border-image-width: vertical horizontal */
-border-image-width: 2em 3em;
-
-/* border-image-width: top horizontal bottom */
-border-image-width: 5% 15% 10%;
-
-/* border-image-width: top right bottom left */
-border-image-width: 5% 2em 10% auto;
-
-/* Global values */
-border-image-width: inherit;
-border-image-width: initial;
-border-image-width: unset;
-
-
-где:
-
-
- width Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
- vertical Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
- horizontal Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
- top Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
- bottom Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
- right Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
- left Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
- inheritIs a keyword indicating that all four values are inherited from their parent's element calculated value.
-
-
-Значения
-
-
- <length>Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
- <percentage>Represents the width of the border as a percentage of the element. The percentage must not be negative.
- <number>Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.
- autoCauses the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-HTML Content
-
-<!DOCTYPE html>
-
-<html>
- <head></head>
- <body>
- <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
- eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
- no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
- </body>
-</html>
-
-
-CSS Content
-
-p {
- border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
- border-image-slice: 30;
- border-image-width: 20px;
- border-image-repeat: round;
- padding: 40px;
-}
-
-{{ EmbedLiveSample('Примеры', '480', '320', '', 'Web/CSS/border-image-width') }}
-
-Спецификации
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}}
- {{Spec2('CSS3 Backgrounds')}}
- Initial definition
-
-
-
-
-Совместимость с браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/border-image-width/index.md b/files/ru/web/css/border-image-width/index.md
new file mode 100644
index 00000000000000..e5f34fc6d539f3
--- /dev/null
+++ b/files/ru/web/css/border-image-width/index.md
@@ -0,0 +1,109 @@
+---
+title: border-image-width
+slug: Web/CSS/border-image-width
+translation_of: Web/CSS/border-image-width
+---
+{{CSSRef}}
+
+## Описание
+
+he **`border-image-width`** CSS property defines the width of the border image by defining inward offsets from the border edges. If the `border-image-width` is greater than the {{cssxref("border-width")}}, then the border image extends beyond the padding (and/or content) edge.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+/* border-image-width: all */
+border-image-width: 3;
+
+/* border-image-width: vertical horizontal */
+border-image-width: 2em 3em;
+
+/* border-image-width: top horizontal bottom */
+border-image-width: 5% 15% 10%;
+
+/* border-image-width: top right bottom left */
+border-image-width: 5% 2em 10% auto;
+
+/* Global values */
+border-image-width: inherit;
+border-image-width: initial;
+border-image-width: unset;
+```
+
+где:
+
+- _width_
+ - : Is a value denoting the width of the image used as a border to apply to all four edges. It is used only in the one-value syntax.
+- _vertical_
+ - : Is a value denoting the width of the image used as a border to apply to all vertical edges, that is the top and bottom edges. It is used only in the two-value syntax.
+- _horizontal_
+ - : Is a value denoting the width of the image used as a border to apply to all horizontal edges, that is the right and left edges. It is used only in the two- and three-value syntaxes.
+- _top_
+ - : Is a value denoting the width of the image used as a border to apply to the top edge. It is used only in the three- and four-value syntaxes.
+- _bottom_
+ - : Is a value denoting the width of the image used as a border to apply to the bottom edge. It is used only in the three- and four-value syntaxes.
+- _right_
+ - : Is a value denoting the width of the image used as a border to apply to the right edge. It is used only in the four-value syntax.
+- _left_
+ - : Is a value denoting the width of the image used as a border to apply to the left edge. It is used only in the four-value syntax.
+- `inherit`
+ - : Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+### Значения
+
+- ``
+ - : Represents the width of the border. It can be an absolute or relative length. This length must not be negative.
+- ``
+ - : Represents the width of the border as a percentage of the element. The percentage must not be negative.
+- ``
+ - : Represents a multiple of the computed value of the element's {{cssxref("border-width")}} property to be used as the border width. The number must not be negative.
+- `auto`
+ - : Causes the border image width to equal the intrinsic width or height (whichever is applicable) of the corresponding {{cssxref("border-image-slice")}}. If the image does not have the required intrinsic dimension then the corresponding computed border-width is used instead.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### HTML Content
+
+```html
+
+
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
+ At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren,
+ no sea takimata sanctus est Lorem ipsum dolor sit amet.
+
+
+```
+
+### CSS Content
+
+```css
+p {
+ border-image-source: url("https://mdn.mozillademos.org/files/10470/border.png");
+ border-image-slice: 30;
+ border-image-width: 20px;
+ border-image-repeat: round;
+ padding: 40px;
+}
+```
+
+{{ EmbedLiveSample('Примеры', '480', '320', '', 'Web/CSS/border-image-width') }}
+
+## Спецификации
+
+| Specification | Status | Comment |
+| -------------------------------------------------------------------------------------------------------- | ---------------------------------------- | ------------------ |
+| {{SpecName('CSS3 Backgrounds', '#border-image-width', 'border-image-width')}} | {{Spec2('CSS3 Backgrounds')}} | Initial definition |
+
+## Совместимость с браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/border-radius/index.html b/files/ru/web/css/border-radius/index.html
deleted file mode 100644
index 9f1ccc2cdb691b..00000000000000
--- a/files/ru/web/css/border-radius/index.html
+++ /dev/null
@@ -1,271 +0,0 @@
----
-title: border-radius
-slug: Web/CSS/border-radius
-tags:
- - CSS
- - CSS-свойство
- - Скругление
- - Углы
-translation_of: Web/CSS/border-radius
----
-{{CSSRef}}
-
-border-radiusCSS -свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.
-
-{{EmbedInteractiveExample("pages/css/border-radius.html")}}
-
-
-
-Это свойство является короткой записью для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.
-
-Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.
-
-Свойство border-radius не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение collapse.
-
-Замечание: Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в border-radius:0 0 inherit inherit, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
-
-Синтаксис
-
-/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
-/* Скругление применяется ко всем четырём углам */
-border-radius: 10px;
-
-/* top-left-and-bottom-right | top-right-and-bottom-left */
-border-radius: 10px 5%;
-
-/* top-left | top-right-and-bottom-left | bottom-right */
-border-radius: 2px 4px 2px;
-
-/* top-left | top-right | bottom-right | bottom-left */
-border-radius: 1px 0 3px 4px;
-
-/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */
-/* (первые значения радиуса) /радиус */
-border-radius: 10px 5% / 20px;
-
-/* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */
-border-radius: 10px 5% / 20px 30px;
-
-/* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */
-border-radius: 10px 5px 2em / 20px 25px 30%;
-
-/* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */
-border-radius: 10px 5% / 20px 25em 30px 35em;
-
-/* Глобальные значения */
-border-radius: inherit;
-border-radius: initial;
-border-radius: unset;
-Свойство border-radius может быть задано как:
-
-
- одно, два, три или четыре значения {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Используется для задания обычного радиуса углов.
- одна, две, три или четыре пары значений <length> or <percentage>, разделённые "/". Используется для задания эллиптического скругления.
-
-
-Значения
-
-
-
-
- radius {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара).
-
-
- top-left-and-bottom-right {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями.
-
-
- top-right-and-bottom-left {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями.
-
-
- top-left {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
-
-
- top-right {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями.
-
-
- bottom-right {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями.
-
-
- bottom-left {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями.
-
-
-
-
-
- {{cssxref("<length>")}}
- Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
- {{cssxref("<percentage>")}}
- Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
-
-
-Например:
-
-border-radius: 1em/5em;
-
-/* ... эквивалентно этому: */
-border-top-left-radius: 1em 5em;
-border-top-right-radius: 1em 5em;
-border-bottom-right-radius: 1em 5em;
-border-bottom-left-radius: 1em 5em;
-
-
-border-radius: 4px 3px 6px / 2px 4px;
-
-/* ... эквивалентно этому: */
-border-top-left-radius: 4px 2px;
-border-top-right-radius: 3px 4px;
-border-bottom-right-radius: 6px 2px;
-border-bottom-left-radius: 3px 4px;
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-
- <pre id="example-1">
-border: solid 10px;
-border-radius: 10px 40px 40px 10px;
- </pre>
- <pre id="example-2">
-border: groove 1em red;
-border-radius: 2em;
- </pre>
- <pre id="example-3">
-background: gold;
-border: ridge gold;
-border-radius: 13em/3em;
- </pre>
- <pre id="example-4">
-border: none;
-border-radius: 40px 10px;
-background: gold;
- </pre>
- <pre id="example-5">
-border: none;
-border-radius: 50%;
-background: burlywood;
- </pre>
- <pre id="example-6">
-border: dotted;
-border-width: 10px 4px;
-border-radius: 10px 40px;
- </pre>
- <pre id="example-7">
-border: dashed;
-border-width: 2px 4px;
-border-radius: 40px;
- </pre>
-
-
-
-pre {
- margin: 20px;
- padding: 20px;
- width: 80%;
- height: 80px;
-}
-
-pre#example-1 {
- border: solid 10px;
- border-radius: 10px 40px 40px 10px;
-}
-
-pre#example-2 {
- border: groove 1em red;
- border-radius: 2em;
-}
-
-pre#example-3 {
- background: gold;
- border: ridge gold;
- border-radius: 13em/3em;
-}
-
-pre#example-4 {
- border: none;
- border-radius: 40px 10px;
- background: gold;
-}
-
-pre#example-5 {
- border: none;
- border-radius: 50%;
- background: burlywood;
-}
-
-pre#example-6 {
- border: dotted;
- border-width: 10px 4px;
- border-radius: 10px 40px;
-}
-
-pre#example-7 {
- border: dashed;
- border-width: 2px 4px;
- border-radius: 40px;
-}
-
-
-{{EmbedLiveSample("", "200", "1150")}}
-
-Живые примеры
-
-
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{ SpecName('CSS3 Backgrounds', '#border-radius', 'border-radius') }}
- {{ Spec2('CSS3 Backgrounds') }}
- Изначальное определение
-
-
-
-
-{{cssinfo}}
-
-Совместимость с браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
- Относящиеся к Border-radius CSS-свойства: {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}}, {{Cssxref("border-bottom-left-radius")}}
-
diff --git a/files/ru/web/css/border-radius/index.md b/files/ru/web/css/border-radius/index.md
new file mode 100644
index 00000000000000..913371c6fe453c
--- /dev/null
+++ b/files/ru/web/css/border-radius/index.md
@@ -0,0 +1,218 @@
+---
+title: border-radius
+slug: Web/CSS/border-radius
+tags:
+ - CSS
+ - CSS-свойство
+ - Скругление
+ - Углы
+translation_of: Web/CSS/border-radius
+---
+{{CSSRef}}
+
+**`border-radius`** — это [CSS](/ru/docs/Web/CSS)-свойство, позволяющее разработчикам определять, как скругляются границы блока. Закруглённость каждого угла определяется с помощью одного или двух радиусов, определяя его форму: круг или эллипс.
+
+{{EmbedInteractiveExample("pages/css/border-radius.html")}}
+
+Это свойство является [короткой записью](/ru/docs/Web/CSS/Shorthand_properties "ru/CSS/Shorthand_properties") для четырёх свойств {{Cssxref("border-top-left-radius")}}, {{Cssxref("border-top-right-radius")}}, {{Cssxref("border-bottom-right-radius")}} и{{Cssxref("border-bottom-left-radius")}}.
+
+Скругление применяется ко всему {{Cssxref ("background")}}, даже если элемент не имеет границ, точное положение отсечения определяется свойством {{Cssxref ("background-clip")}}.
+
+Свойство `border-radius` не применяется к элементам таблицы, когда свойство {{Cssxref ("border-collapse")}} имеет значение `collapse`.
+
+> **Примечание:** **Замечание:** Как и с любым другим сокращённым свойством, отдельные подсвойства не могут наследоваться. Например, как в `border-radius:0 0 inherit inherit`, что будет частично переопределять существующие определения. Вместо этого должны использоваться отдельные длинные свойства.
+
+## Синтаксис
+
+```css
+/* Такой синтаксис позволяет указать всего одно значение, вместе четырёх */
+/* Скругление применяется ко всем четырём углам */
+border-radius: 10px;
+
+/* top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5%;
+
+/* top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 2px 4px 2px;
+
+/* top-left | top-right | bottom-right | bottom-left */
+border-radius: 1px 0 3px 4px;
+
+/* Синтаксис из двух радиусов также может применяться ко всем четырём углам */
+/* (первые значения радиуса) /радиус */
+border-radius: 10px 5% / 20px;
+
+/* (первые значения радиуса) / top-left-and-bottom-right | top-right-and-bottom-left */
+border-radius: 10px 5% / 20px 30px;
+
+/* (первые значения радиуса) / top-left | top-right-and-bottom-left | bottom-right */
+border-radius: 10px 5px 2em / 20px 25px 30%;
+
+/* (первые значения радиуса) / top-left | top-right | bottom-right | bottom-left */
+border-radius: 10px 5% / 20px 25em 30px 35em;
+
+/* Глобальные значения */
+border-radius: inherit;
+border-radius: initial;
+border-radius: unset;
+```
+
+Свойство `border-radius` может быть задано как:
+
+- одно, два, три или четыре значения {{cssxref("<length>")}} или {{cssxref("<percentage>")}}. Используется для задания обычного радиуса углов.
+- одна, две, три или четыре пары значений `` or ``, разделённые "/". Используется для задания эллиптического скругления.
+
+### Значения
+
+| _radius_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус скругления для всех углов элемента. Может быть указано только одно значение (или одна пара). |
+| --------------------------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| _top-left-and-bottom-right_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего левого и нижнего правого угла элемента. Следует использовать синтаксис с двумя значениями. |
+| _top-right-and-bottom-left_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого и нижнего левого угла элемента. Можно использовать синтаксис с двумя или тремя значениями. |
+| _top-left_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для левого верхнего угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
+| _top-right_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для верхнего правого угла элемента. Следует использовать синтаксис с четырьмя значениями. |
+| _bottom-right_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего правого угла элемента. Можно использовать синтаксис с тремя и четырьмя значениями. |
+| _bottom-left_ |  | {{cssxref("<length>")}} или {{cssxref("<percentage>")}} устанавливает радиус для нижнего левого угла элемента. Следует использовать синтаксис с четырьмя значениями. |
+
+- {{cssxref("<length>")}}
+ - : Обозначает размер радиуса окружности или две полуоси эллипса. Может быть выражена в любых единицах CSS. Отрицательные значения не принимаются.
+- {{cssxref("<percentage>")}}
+ - : Обозначает размер радиуса окружности, или две полуоси эллипса. Проценты по горизонтальной оси относятся к ширине элемента, проценты по вертикальной оси к высоте. Отрицательные значения недействительны.
+
+Например:
+
+```css
+border-radius: 1em/5em;
+
+/* ... эквивалентно этому: */
+border-top-left-radius: 1em 5em;
+border-top-right-radius: 1em 5em;
+border-bottom-right-radius: 1em 5em;
+border-bottom-left-radius: 1em 5em;
+```
+
+```css
+border-radius: 4px 3px 6px / 2px 4px;
+
+/* ... эквивалентно этому: */
+border-top-left-radius: 4px 2px;
+border-top-right-radius: 3px 4px;
+border-bottom-right-radius: 6px 2px;
+border-bottom-left-radius: 3px 4px;
+```
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+```html hidden
+
+border: solid 10px;
+border-radius: 10px 40px 40px 10px;
+
+
+border: groove 1em red;
+border-radius: 2em;
+
+
+background: gold;
+border: ridge gold;
+border-radius: 13em/3em;
+
+
+border: none;
+border-radius: 40px 10px;
+background: gold;
+
+
+border: none;
+border-radius: 50%;
+background: burlywood;
+
+
+border: dotted;
+border-width: 10px 4px;
+border-radius: 10px 40px;
+
+
+border: dashed;
+border-width: 2px 4px;
+border-radius: 40px;
+
+```
+
+```css hidden
+pre {
+ margin: 20px;
+ padding: 20px;
+ width: 80%;
+ height: 80px;
+}
+
+pre#example-1 {
+ border: solid 10px;
+ border-radius: 10px 40px 40px 10px;
+}
+
+pre#example-2 {
+ border: groove 1em red;
+ border-radius: 2em;
+}
+
+pre#example-3 {
+ background: gold;
+ border: ridge gold;
+ border-radius: 13em/3em;
+}
+
+pre#example-4 {
+ border: none;
+ border-radius: 40px 10px;
+ background: gold;
+}
+
+pre#example-5 {
+ border: none;
+ border-radius: 50%;
+ background: burlywood;
+}
+
+pre#example-6 {
+ border: dotted;
+ border-width: 10px 4px;
+ border-radius: 10px 40px;
+}
+
+pre#example-7 {
+ border: dashed;
+ border-width: 2px 4px;
+ border-radius: 40px;
+}
+```
+
+{{EmbedLiveSample("", "200", "1150")}}
+
+## Живые примеры
+
+- Пример 1: {{CSSRef}}
-
-Summary
-
-CSS-свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.
-
-{{cssinfo}}
-
-Синтаксис
-
-Общий синтаксис : {{csssyntax("border-width")}}
-
-
-border-width: ширина /* Одно значение */
-border-width: вертикальная горизонтальная /* Два значения */
-border-width: верх горизонтальная основание /* Три значения */
-border-width: верх право основание лево /* Четыре значения */
-
-border-width: inherit /* Родительское значение */
-
-
-Values
-
-
- <br-width>Is either a non-negative explicit {{cssxref("<length>")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values:
-
-
-
- thin
-
-
- A thin border
-
-
- medium
-
-
- A medium border
-
-
- thick
-
-
- A thick border
-
-
-
- The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the thin ≤ medium ≤ thick inequality and that the values are constant on a single document.
-inheritIs a keyword indicating that all four values are inherited from their parent's element calculated value.
-
-
-Examples
-
-A mix of values and lengths
-
-HTML
-
-<p id="sval">
- one value: 6px wide border on all 4 sides</p>
-<p id="bival">
- two different values: 2px wide top and bottom border, 10px wide right and left border</p>
-<p id="treval">
- three different values: 0.3em top, 9px bottom, and zero width right and left</p>
-<p id="fourval">
- four different values: "thin" top, "medium" right, "thick" bottom, and 1em right</p>
-
-CSS
-
-#sval {
- border: ridge #ccc;
- border-width: 6px;
-}
-#bival {
- border: solid red;
- border-width: 2px 10px;
-}
-#treval {
- border: dotted orange;
- border-width: 0.3em 0 9px;
-}
-#fourval {
- border: solid lightgreen;
- border-width: thin medium thick 1em;
-}
-p {
- width: auto;
- margin: 0.25em;
- padding: 0.25em;
-}
-
-Result
-
-{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}}
- {{Spec2('CSS3 Backgrounds')}}
- No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property.
-
-
- {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}}
- {{Spec2('CSS2.1')}}
- Added the constraint that values' meaning must be constant inside a document.
-
-
- {{SpecName('CSS1', '#border-width', 'border-width')}}
- {{Spec2('CSS1')}}
-
-
-
-
-Browser compatibility
-
-{{Compat}}
-
-See also
-
-
- The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
- The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
-
diff --git a/files/ru/web/css/border-width/index.md b/files/ru/web/css/border-width/index.md
new file mode 100644
index 00000000000000..44da872120549e
--- /dev/null
+++ b/files/ru/web/css/border-width/index.md
@@ -0,0 +1,97 @@
+---
+title: border-width
+slug: Web/CSS/border-width
+translation_of: Web/CSS/border-width
+---
+{{CSSRef}}
+
+## Summary
+
+CSS-свойство {{cssxref("border-width")}} определяет ширину рамки элемента. Но обычно её задают не отдельно, а в составе свойства {{cssxref("border")}}.
+
+{{cssinfo}}
+
+## Синтаксис
+
+[Общий синтаксис](/ru/docs/CSS/Value_definition_syntax): {{csssyntax("border-width")}}
+
+ border-width: ширина /* Одно значение */
+ border-width: вертикальная горизонтальная /* Два значения */
+ border-width: верх горизонтальная основание /* Три значения */
+ border-width: верх право основание лево /* Четыре значения */
+
+ border-width: inherit /* Родительское значение */
+
+### Values
+
+- ``
+ - | : Is either a non-negative explicit {{cssxref("<length>")}} value or a keyword denoting the thickness of the bottom border. The keyword must be one of the following values: | `thin` | | A thin border |
+ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------ | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+ | `medium` | | A medium border |
+ | `thick` | | A thick border | The specification doesn't precisely define the thickness of each of the keywords, which is therefore implementation specific. Nevertheless, it requests that the thickness does follow the `thin ≤ medium ≤ thick` inequality and that the values are constant on a single document. |
+- `inherit`
+ - : Is a keyword indicating that all four values are inherited from their parent's element calculated value.
+
+## Examples
+
+### A mix of values and lengths
+
+#### HTML
+
+```html
+
+ one value: 6px wide border on all 4 sides
+
+ two different values: 2px wide top and bottom border, 10px wide right and left border
+
+ three different values: 0.3em top, 9px bottom, and zero width right and left
+
+ four different values: "thin" top, "medium" right, "thick" bottom, and 1em right
+```
+
+#### CSS
+
+```css
+#sval {
+ border: ridge #ccc;
+ border-width: 6px;
+}
+#bival {
+ border: solid red;
+ border-width: 2px 10px;
+}
+#treval {
+ border: dotted orange;
+ border-width: 0.3em 0 9px;
+}
+#fourval {
+ border: solid lightgreen;
+ border-width: thin medium thick 1em;
+}
+p {
+ width: auto;
+ margin: 0.25em;
+ padding: 0.25em;
+}
+```
+
+#### Result
+
+{{ EmbedLiveSample('A_mix_of_values_and_lengths', 300, 180) }}
+
+## Specifications
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS3 Backgrounds', '#the-border-width', 'border-width')}} | {{Spec2('CSS3 Backgrounds')}} | No direct change, the {{cssxref("<length>")}} CSS data type extension has an effect on this property. |
+| {{SpecName('CSS2.1', 'box.html#border-width-properties', 'border-width')}} | {{Spec2('CSS2.1')}} | Added the constraint that values' meaning must be constant inside a document. |
+| {{SpecName('CSS1', '#border-width', 'border-width')}} | {{Spec2('CSS1')}} | |
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- The border-related shorthand properties: {{Cssxref("border")}}, {{Cssxref("border-style")}}, {{Cssxref("border-color")}}
+- The border-width-related properties: {{Cssxref("border-bottom-width")}}, {{Cssxref("border-left-width")}}, {{Cssxref("border-right-width")}}, {{Cssxref("border-top-width")}}
diff --git a/files/ru/web/css/border/index.html b/files/ru/web/css/border/index.html
deleted file mode 100644
index 0a1585b046c257..00000000000000
--- a/files/ru/web/css/border/index.html
+++ /dev/null
@@ -1,92 +0,0 @@
----
-title: border
-slug: Web/CSS/border
-tags:
- - CSS Границы
- - CSS-свойства
- - Разметка
- - Совместимость Мобильных Браузеров
- - Справка
-translation_of: Web/CSS/border
----
-{{CSSRef("CSS Borders")}}
-
-Свойство CSS borderуниверсальное свойство для указания всех персональных свойств границ за раз: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}.
-
-{{EmbedInteractiveExample("pages/css/border.html")}}
-
-Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, border не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. none.
-
-border: 1px;
-border: 2px dotted;
-border: medium dashed green;
-
-
-
-
-
-
Замечание: Рекомендуется использовать border, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, border принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
-
Синтаксис
-
-Свойство border указывается используя одно или более значений <br-width> <br-style> <color>
-
-Значения
-
-
- <br-width>Толщина границ. По умолчанию medium если отсутствует. Больше информации {{Cssxref("border-width")}}.
- <br-style>Стиль линии границ. По умолчанию none если отсутствует. Больше информации {{Cssxref("border-style")}}.
- {{cssxref("<color>")}}
- Цвет границ. По умолчанию принимает значение свойства элементов {{cssxref("color")}}. Больше информации {{Cssxref("border-color")}}.
-
-
-Обычный синтаксис
-
-{{csssyntax}}Примеры
-
-HTML
-
-<div class="fun-border">Look at my borders.</div>
-<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
-<style contenteditable>
- .fun-border {
- border: 2px solid red;
- }
-</style>
-
-
-CSS
-
-style {
- display : block;
- border : 1px dashed black;
-} Результат
-
-{{EmbedLiveSample('Examples')}}
-
-Спецификация
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость браузеров
-
-
-
-Также смотрите
-
-
- {{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}
-
diff --git a/files/ru/web/css/border/index.md b/files/ru/web/css/border/index.md
new file mode 100644
index 00000000000000..cd72d59df1a453
--- /dev/null
+++ b/files/ru/web/css/border/index.md
@@ -0,0 +1,84 @@
+---
+title: border
+slug: Web/CSS/border
+tags:
+ - CSS Границы
+ - CSS-свойства
+ - Разметка
+ - Совместимость Мобильных Браузеров
+ - Справка
+translation_of: Web/CSS/border
+---
+{{CSSRef("CSS Borders")}}
+
+Свойство [CSS](/ru/docs/CSS "CSS") **`border`** это [универсальное свойство](/ru/docs/Web/CSS/Shorthand_properties) для указания всех персональных свойств границ за раз: {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}}.
+
+{{EmbedInteractiveExample("pages/css/border.html")}}
+
+Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, `border` не может быть использован для указания пользовательского значения {{cssxref("border-image")}}, но вместо этого устанавливает его в начальное значение, т.е. `none`.
+
+```css
+border: 1px;
+border: 2px dotted;
+border: medium dashed green;
+```
+
+> **Примечание:** **Замечание:** Рекомендуется использовать `border`, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства {{Cssxref("border-width")}}, {{Cssxref("border-style")}}, и {{Cssxref("border-color")}} принимают до четырёх значений, позволяя установить различные значения для каждого ребра, `border` принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.
+
+## Синтаксис
+
+Свойство `border` указывается используя одно или более значений [``](#), [``](#), и [``](#) указанных ниже.
+
+### Значения
+
+- ``
+ - : Толщина границ. По умолчанию `medium` если отсутствует. Больше информации {{Cssxref("border-width")}}.
+- ``
+ - : Стиль линии границ. По умолчанию `none` если отсутствует. Больше информации {{Cssxref("border-style")}}.
+- {{cssxref("<color>")}}
+ - : Цвет границ. По умолчанию принимает значение свойства элементов {{cssxref("color")}}. Больше информации {{Cssxref("border-color")}}.
+
+### Обычный синтаксис
+
+ {{csssyntax}}
+
+## Примеры
+
+### HTML
+
+```html
+Look at my borders.
+Вы можете редактировать CSS ниже для экспериментов со стилями границ!
+
+```
+
+### CSS
+
+```css
+style {
+ display: block;
+ border: 1px dashed black;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Examples')}}
+
+## Спецификация
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость браузеров
+
+{{Compat}}
+
+## Также смотрите
+
+- {{ Cssxref("border-radius") }}-related CSS properties: {{ Cssxref("border-top-left-radius") }}, {{ Cssxref("border-top-right-radius") }}, {{ Cssxref("border-bottom-right-radius") }}, {{ Cssxref("border-bottom-left-radius") }}
diff --git a/files/ru/web/css/bottom/index.html b/files/ru/web/css/bottom/index.html
deleted file mode 100644
index ac214a881199ed..00000000000000
--- a/files/ru/web/css/bottom/index.html
+++ /dev/null
@@ -1,158 +0,0 @@
----
-title: bottom
-slug: Web/CSS/bottom
-tags:
- - CSS
- - CSS Позиционирование
- - CSS-свойство
- - Справка
-translation_of: Web/CSS/bottom
----
-{{CSSRef}}
-
-CSS свойство bottombottomposition: static).
-
-{{EmbedInteractiveExample("pages/css/bottom.html")}}
-
-Эффект свойства bottom зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):
-
-
- Когда задано position: absolute или fixed — свойство bottom устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.
- Когда задано position: relative — свойство bottom устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.
- Когда задано position: sticky — свойство bottom работает так, как при position: relative во время нахождения элемента внутри области просмотра, и как position: fixed вне области просмотра.
- Когда задано position: static — свойство bottom не имеет никакого эффекта .
-
-
-Когда заданы оба свойства {{cssxref("top")}} и bottom, а свойство {{cssxref("height")}} не задано, auto или равно 100%, то оба свойства {{cssxref("top")}} и bottom учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а bottom — проигнорировано.
-
-Синтаксис
-
-/* Значения величин */
-bottom: 3px;
-bottom: 2.4em;
-
-/* Процентные значения от высоты родительского блока */
-bottom: 10%;
-
-/* Ключевое слово */
-bottom: auto;
-
-/* Глобальные значения */
-bottom: inherit;
-bottom: initial;
-bottom: unset;
-
-
-Значения
-
-
- {{cssxref("<length>")}}
- Отрицательная, нулевая или положительная величина, которая представляет:
-
- для абсолютно позиционируемых элементов &mdash расстояние до нижнего края содержащего их блока;
- для относительно позиционируемых элементов &mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.
-
-
- {{cssxref("<percentage>")}}
- Процент от высоты родительского блока.
- autoКлючевое слово, которое указывает, что:
-
- для абсолютно спозиционированных элементов — позиция элемента опирается на свойство {{cssxref("top")}}, пока height: auto обрабатывается как высота в зависимости от содержимого; если так же и bottom: auto, то элемент располагается так же, как при статическом позиционировании.
- для относительно спозиционированных элементов — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение top также auto, элемент вообще не перемещается по вертикали.
-
-
- inheritЭто ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("<length>")}}, {{cssxref("<percentage>")}} или ключевое слово auto.
-
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-
-
-Этот пример демонстрирует разницу в поведении свойства bottom, когда {{cssxref("position")}} является absolute и fixed.
-
-HTML
-
-<h2>Эксперимент</h2>
-<p>Здесь<br>мы<br>набираем<br>побольше<br>высоты<br>для<br>вящей<br>наглядности<br>нашего<br>скромного,<br>но<br>очень<br>убедительного<br>эксперимента.<br>- Вот.</p>
-<div class="fixed"><p>Я фиксирован</p></div>
-<div class="absolute"><p>Я абсолютен</p></div>
-
-CSS
-
-p {
- font-size: 30px;
- line-height: 2em;
-}
-
-div {
- width: 48%;
- text-align: center;
- background: rgba(55,55,55,.4);
- border: 1px solid blue;
-}
-
-.absolute {
- position: absolute;
- bottom: 0;
- left: 0;
-}
-
-.fixed {
- position: fixed;
- bottom: 0;
- right: 0;
-}
-
-Результат
-
-{{EmbedLiveSample('Пример','500','250')}}
-
-Характеристики
-
-
-
-
- Спецификация
- Статус
- Коммент
-
-
-
-
- {{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}}
- {{Spec2('CSS3 Transitions')}}
- Определяет дно как анимацию.
-
-
- {{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}}
- {{Spec2('CSS3 Positioning')}}
- Добавляет поведение для липкого позиционирования.
-
-
- {{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}}
- {{Spec2('CSS2.1')}}
- Исходное определение.
-
-
-
-
-{{cssinfo}}
-
-Совместимость с браузером
-
-
-
-Смотрите также
-
-
- {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}
-
diff --git a/files/ru/web/css/bottom/index.md b/files/ru/web/css/bottom/index.md
new file mode 100644
index 00000000000000..2365590d39c7b7
--- /dev/null
+++ b/files/ru/web/css/bottom/index.md
@@ -0,0 +1,123 @@
+---
+title: bottom
+slug: Web/CSS/bottom
+tags:
+ - CSS
+ - CSS Позиционирование
+ - CSS-свойство
+ - Справка
+translation_of: Web/CSS/bottom
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS "CSS") свойство **`bottom`** частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. **`bottom`** не применится, если задано `position: static`).
+
+{{EmbedInteractiveExample("pages/css/bottom.html")}}
+
+Эффект свойства `bottom` зависит от того, как позиционируется элемент (то есть от значения свойства {{cssxref("position")}}):
+
+- Когда задано `position: absolute` или `fixed` — свойство `bottom` устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.
+- Когда задано `position: relative` — свойство `bottom` устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.
+- Когда задано `position: sticky` — свойство `bottom` работает так, как при `position: relative` во время нахождения элемента внутри области просмотра, и как `position: fixed` вне области просмотра.
+- Когда задано `position: static` — свойство `bottom` _не имеет никакого эффекта_.
+
+Когда заданы оба свойства {{cssxref("top")}} и `bottom`, а свойство {{cssxref("height")}} не задано, `auto` или равно `100%`, то оба свойства {{cssxref("top")}} и `bottom` учитываются. Если свойство {{cssxref("height")}} задано, то свойство {{cssxref("top")}} будет учтено, а `bottom` — проигнорировано.
+
+## Синтаксис
+
+```css
+/* Значения величин */
+bottom: 3px;
+bottom: 2.4em;
+
+/* Процентные значения от высоты родительского блока */
+bottom: 10%;
+
+/* Ключевое слово */
+bottom: auto;
+
+/* Глобальные значения */
+bottom: inherit;
+bottom: initial;
+bottom: unset;
+```
+
+### Значения
+
+- {{cssxref("<length>")}}
+ - : Отрицательная, нулевая или положительная величина, которая представляет:\* для _абсолютно позиционируемых элементов_ \&mdash расстояние до нижнего края содержащего их блока;
+ - для _относительно позиционируемых элементов_ \&mdash расстояние, на которое элемент смещается вверх, относительно своего положения в нормальном потоке.
+- {{cssxref("<percentage>")}}
+ - : Процент от высоты родительского блока.
+- `auto`
+ - : Ключевое слово, которое указывает, что:\* для _абсолютно спозиционированных элементов_ — позиция элемента опирается на свойство {{cssxref("top")}}, пока `height: auto` обрабатывается как высота в зависимости от содержимого; если так же и `bottom: auto`, то элемент располагается так же, как при статическом позиционировании.
+ - для _относительно спозиционированных элементов_ — расстояние элемента от его обычной позиции основано на свойстве {{cssxref ("top")}}; если значение `top` также `auto`, элемент вообще не перемещается по вертикали.
+- `inherit`
+ - : Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как {{cssxref("<length>")}}, {{cssxref("<percentage>")}} или ключевое слово `auto`.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+Этот пример демонстрирует разницу в поведении свойства `bottom`, когда {{cssxref("position")}} является `absolute` и `fixed`.
+
+### HTML
+
+```html
+Эксперимент
+Здесь
+
+
+```
+
+### CSS
+
+```css
+p {
+ font-size: 30px;
+ line-height: 2em;
+}
+
+div {
+ width: 48%;
+ text-align: center;
+ background: rgba(55,55,55,.4);
+ border: 1px solid blue;
+}
+
+.absolute {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+}
+
+.fixed {
+ position: fixed;
+ bottom: 0;
+ right: 0;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример','500','250')}}
+
+## Характеристики
+
+| Спецификация | Статус | Коммент |
+| ------------------------------------------------------------------------------------ | ---------------------------------------- | ------------------------------------------------- |
+| {{SpecName('CSS3 Transitions', '#animatable-css', 'bottom')}} | {{Spec2('CSS3 Transitions')}} | Определяет дно как анимацию. |
+| {{SpecName('CSS3 Positioning', '#propdef-bottom', 'bottom')}} | {{Spec2('CSS3 Positioning')}} | Добавляет поведение для липкого позиционирования. |
+| {{SpecName('CSS2.1', 'visuren.html#choose-position', 'bottom')}} | {{Spec2('CSS2.1')}} | Исходное определение. |
+
+{{cssinfo}}
+
+## Совместимость с браузером
+
+{{Compat}}
+
+## Смотрите также
+
+- {{cssxref("position")}}, {{cssxref("top")}}, {{cssxref("left")}}, {{cssxref("right")}}
diff --git a/files/ru/web/css/box-sizing/index.html b/files/ru/web/css/box-sizing/index.html
deleted file mode 100644
index cb5e6de6fab1b1..00000000000000
--- a/files/ru/web/css/box-sizing/index.html
+++ /dev/null
@@ -1,110 +0,0 @@
----
-title: box-sizing
-slug: Web/CSS/box-sizing
-tags:
- - Блоковая модель
- - Контент
- - высота
- - размер
- - ширина
-translation_of: Web/CSS/box-sizing
----
-{{CSSRef}}
-
-CSS свойство box-sizing
-
-{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
-
-
-
-По умолчанию в блоковой модели CSS ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с width: 25%; , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.
-
-Свойство box-sizing может изменять это поведение:
-
-
- content-box даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.border-box говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.
-
-
-
Примечание: Часто выставление box-sizing: border-box полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя position-relative или position: absolute, box-sizing: content-box позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.
-
Синтаксис
-
-Для свойства box-sizing устанавливается единственное ключевое слово из списка значений ниже.
-
-Значения
-
-
- content-boxЭто значение по умолчанию, определённое в CSS стандарте. Свойства width и height включают исключительно контент, и не включают padding и border . Например .box {width: 350px; border: 10px solid black;} будет иметь ширину 370 пикселей.
- Размеры элемента рассчитываются следующим образом: width = ширина контента , и height = высота контента . (Границы и внутренние отступы не включаются в вычисление.)
border-boxСвойства width и height включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, .box {width: 350px; border: 10px solid black;} будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому border-box невозможно использовать для скрытия элемента.
- Размеры элемента рассчитываются следующим образом: width = граница + внутренний отступ + ширина контента , и height = граница + внутренний отступ + высота контента .
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-
-
Примечание: Значение padding-box устарело
-
Пример
-
-Этот пример показывает как разные значения box-sizing изменяют видимый размер двух идентичных элементов.
-
-HTML
-
-<div class="content-box">Content box</div>
-<br>
-<div class="border-box">Border box</div>
-
-CSS
-
-div {
- width: 160px;
- height: 80px;
- padding: 20px;
- border: 8px solid red;
- background: yellow;
-}
-
-.content-box {
- box-sizing: content-box;
- /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
- Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
- Content box width: 160px
- Content box height: 80px */
-}
-
-.border-box {
- box-sizing: border-box;
- /* Total width: 160px
- Total height: 80px
- Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
- Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
-}
-
-Результат
-
-{{EmbedLiveSample('Пример', 'auto', 300)}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Совместимость с браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/box-sizing/index.md b/files/ru/web/css/box-sizing/index.md
new file mode 100644
index 00000000000000..1b330ef805ce2f
--- /dev/null
+++ b/files/ru/web/css/box-sizing/index.md
@@ -0,0 +1,100 @@
+---
+title: box-sizing
+slug: Web/CSS/box-sizing
+tags:
+ - Блоковая модель
+ - Контент
+ - высота
+ - размер
+ - ширина
+translation_of: Web/CSS/box-sizing
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`box-sizing`** определяет как вычисляется общая ширина и высота элемента.
+
+{{EmbedInteractiveExample("pages/css/box-sizing.html")}}
+
+По умолчанию в [блоковой модели CSS](/ru/docs/Web/CSS/box_model "CSS/Box_model") ширина и высота, которую вы задаёте элементу применяется только для контента элемента. Если у элемента есть граница или внутренний отступ, то они добавляются к ширине и высоте, чтобы получить отображаемый на экране размер. Это значит, что когда вы выставляете ширину и высоту, вам придётся изменять значение, при добавлении границ и отступов. Например, если у вас есть четыре блока с `width: 25%;` , и у какого-нибудь из них есть граница или внутренний отступ слева или справа, то по умолчанию они не поместятся на одной строке.
+
+Свойство `box-sizing` может изменять это поведение:
+
+- `content-box` даёт стандартное поведение свойства box-sizing. Если вы выставите элементу ширину 100 пикселей, то ширина его контента будет 100 пикселей, а ширина границ и внутренних отступов при рендере будет добавлена к финальной ширине, делая элемент шире ста пикселей.
+- `border-box` говорит браузеру учитывать любые границы и внутренние отступы в значениях, которые вы указываете в ширине и высоте элемента. Если вы выставите элементу ширину 100 пикселей, то эти 100 пикселей будут включать в себя границы и внутренние отступы, а контент сожмётся, чтобы выделить для них место. Обычно это упрощает работу с размерами элементов.
+
+> **Примечание:**Часто выставление `box-sizing: border-box` полезно для размещения элементов. Оно сильно упрощает работу с размерами элементов, и как правило устраняет ряд подводных камней, на которые вы можете наткнуться, размещая контент. С другой стороны, используя `position-relative` или `position: absolute`, `box-sizing: content-box` позволяет позиционным значениям быть зависимыми только от контента, а не от границ и отступов, что иногда желательно.
+
+## Синтаксис
+
+Для свойства `box-sizing` устанавливается единственное ключевое слово из списка значений ниже.
+
+### Значения
+
+- `content-box`
+ - : Это значение по умолчанию, определённое в CSS стандарте. Свойства [width](/ru/docs/Web/CSS/width) и [height](/ru/docs/Web/CSS/height) включают исключительно контент, и не включают [padding](/ru/docs/Web/CSS/padding) и [border](/ru/docs/Web/CSS/border). Например `.box {width: 350px; border: 10px solid black;}` будет иметь ширину 370 пикселей.Размеры элемента рассчитываются следующим образом: _width = ширина контента_, и _height = высота контента_. (Границы и внутренние отступы не включаются в вычисление.)
+- `border-box`
+ - : Свойства [width](/ru/docs/Web/CSS/width) и [height](/ru/docs/Web/CSS/height) включают контент, внутренний отступ и границы, но не включают внешний отступ. Заметьте, что внутренний отступ и граница будут внутри блока. Например, `.box {width: 350px; border: 10px solid black;}` будет иметь общую ширину 350 пикселей, а ширина контента составит 330 пикселей. Размер контента не может быть отрицательным, минимальное значение - 0, поэтому `border-box` невозможно использовать для скрытия элемента.Размеры элемента рассчитываются следующим образом: _width = граница + внутренний отступ + ширина контента_, и _height = граница + внутренний отступ + высота контента_.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+> **Примечание:** Значение `padding-box` устарело
+
+## Пример
+
+Этот пример показывает как разные значения `box-sizing` изменяют видимый размер двух идентичных элементов.
+
+### HTML
+
+```html
+Content box
+Border box
+```
+
+### CSS
+
+```css
+div {
+ width: 160px;
+ height: 80px;
+ padding: 20px;
+ border: 8px solid red;
+ background: yellow;
+}
+
+.content-box {
+ box-sizing: content-box;
+ /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
+ Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
+ Content box width: 160px
+ Content box height: 80px */
+}
+
+.border-box {
+ box-sizing: border-box;
+ /* Total width: 160px
+ Total height: 80px
+ Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
+ Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
+}
+```
+
+### Результат
+
+{{EmbedLiveSample('Пример', 'auto', 300)}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Совместимость с браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Блоковая модель CSS](/ru/docs/Web/CSS/box_model "CSS/Box model")
diff --git a/files/ru/web/css/calc/index.html b/files/ru/web/css/calc/index.html
deleted file mode 100644
index dfe1c4b88d41d0..00000000000000
--- a/files/ru/web/css/calc/index.html
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Функция calc()
-slug: Web/CSS/calc
-tags:
- - css calc
-translation_of: Web/CSS/calc()
-original_slug: Web/CSS/calc()
----
-{{CSSRef}}
-
-calc() - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.
-
-{{EmbedInteractiveExample("pages/css/function-calc.html")}}
-
-Синтаксис
-
-Функция calc() принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, *, / с использованием стандартных правил приоритета операторов
-
-
- + Сложение
- - Вычитание.
- * Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
- / Деление. Делитель должен быть {{cssxref("<number>")}}.
-
-
-Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.
-
-Внимание: Деление на ноль выдаст ошибку при парсинге HTML.
-
-Note: Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение calc(50% -8px) будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как calc(50% - 8px) - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
-
-
-
-
-Формальный синтаксис
-
-calc(expression )
-
-Примеры
-
-Позиционирование объекта в окне с помощью отступа
-
-calc() делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px.
-
-.banner {
- position: absolute;
- left: 5%; /* для браузеров не поддерживающих calc() */
- left: calc(40px);
- width: 90%; /* для браузеров не поддерживающих calc() */
- width: calc(100% - 80px);
- border: solid black 1px;
- box-shadow: 1px 2px;
- background-color: yellow;
- padding: 6px;
- text-align: center;
-}
-
-
-<div class="banner">Это баннер!</div>
-
-{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}
-
-Автоматическое изменение размера формы ввода для соответствия размеру контейнера
-
-В следующем случае calc() помогает обеспечить не выпадание полей формы за края блока, задав отступ.
-
-Давайте посмотрим некоторый код CSS:
-
-input {
- padding: 2px;
- display: block;
- width: 98%; /* для браузеров, не поддерживающих calc() */
- width: calc(100% - 1em);
-}
-
-#formbox {
- width: 130px; /* для браузеров, не поддерживающих calc() */
- width: calc(100% / 6);
- border: 1px solid black;
- padding: 4px;
-}
-
-
-Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию calc(), которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:
-
-<form>
- <div id="formbox">
- <label>Type something:</label>
- <input type="text">
- </div>
-</form>
-
-
-{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}
-
-Вложенный calc() с CSS переменными
-
-Вы также можете использовать calc() с CSS переменными. Рассмотрим пример кода:
-
-.foo {
- --widthA: 100px;
- --widthB: calc(var(--widthA) / 2);
- --widthC: calc(var(--widthB) / 2);
- width: var(--widthC);
-}
-
-
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/calc/index.md b/files/ru/web/css/calc/index.md
new file mode 100644
index 00000000000000..6b64ff3eb71822
--- /dev/null
+++ b/files/ru/web/css/calc/index.md
@@ -0,0 +1,122 @@
+---
+title: Функция calc()
+slug: Web/CSS/calc
+tags:
+ - css calc
+translation_of: Web/CSS/calc()
+original_slug: Web/CSS/calc()
+---
+{{CSSRef}}
+
+`calc()` - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы {{cssxref("<length>")}}, {{cssxref("<frequency>")}}, {{cssxref("<angle>")}}, {{cssxref("<time>")}}, {{cssxref("<number>")}}, или {{cssxref("<integer>")}}.
+
+{{EmbedInteractiveExample("pages/css/function-calc.html")}}
+
+## Синтаксис
+
+Функция `calc()` принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, \*, / с использованием стандартных правил приоритета операторов:
+
+- **+**
+ - : Сложение
+- **-**
+ - : Вычитание.
+- **\***
+ - : Умножение. По крайней мере хоть один из сомножителей должен быть {{cssxref("<number>")}}.
+- **/**
+ - : Деление. Делитель должен быть {{cssxref("<number>")}}.
+
+Операнды в expression могут быть различными выражениями {{cssxref("<length>")}}. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.
+
+> **Примечание:** **Внимание:** Деление на ноль выдаст ошибку при парсинге HTML.
+
+> **Примечание:** Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение `calc(50% -8px)` будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как `calc(50% - 8px)` - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
+> Операторы \* и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.
+
+### Формальный синтаксис
+
+ calc(expression)
+
+## Примеры
+
+### Позиционирование объекта в окне с помощью отступа
+
+`calc()` делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px.
+
+```css
+.banner {
+ position: absolute;
+ left: 5%; /* для браузеров не поддерживающих calc() */
+ left: calc(40px);
+ width: 90%; /* для браузеров не поддерживающих calc() */
+ width: calc(100% - 80px);
+ border: solid black 1px;
+ box-shadow: 1px 2px;
+ background-color: yellow;
+ padding: 6px;
+ text-align: center;
+}
+```
+
+```html
+Это баннер!
+```
+
+{{ EmbedLiveSample('Позиционирование_объекта_в_окне_с_помощью_отступа', '100%', '60') }}
+
+### Автоматическое изменение размера формы ввода для соответствия размеру контейнера
+
+В следующем случае `calc()` помогает обеспечить не выпадание полей формы за края блока, задав отступ.
+
+Давайте посмотрим некоторый код CSS:
+
+```css
+input {
+ padding: 2px;
+ display: block;
+ width: 98%; /* для браузеров, не поддерживающих calc() */
+ width: calc(100% - 1em);
+}
+
+#formbox {
+ width: 130px; /* для браузеров, не поддерживающих calc() */
+ width: calc(100% / 6);
+ border: 1px solid black;
+ padding: 4px;
+}
+```
+
+Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию `calc()`, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:
+
+```html
+
+```
+
+{{ EmbedLiveSample('Автоматическое_изменение_размера_формы_ввода_для_соответствия_размеру_контейнера', '100%', '80') }}
+
+### Вложенный `calc()` с CSS переменными
+
+Вы также можете использовать `calc()` с CSS переменными. Рассмотрим пример кода:
+
+ .foo {
+ --widthA: 100px;
+ --widthB: calc(var(--widthA) / 2);
+ --widthC: calc(var(--widthB) / 2);
+ width: var(--widthC);
+ }
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog](https://hacks.mozilla.org/2010/06/css3-calc/ "Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog")
diff --git a/files/ru/web/css/cascade/index.html b/files/ru/web/css/cascade/index.html
deleted file mode 100644
index 705955ba8c7de2..00000000000000
--- a/files/ru/web/css/cascade/index.html
+++ /dev/null
@@ -1,154 +0,0 @@
----
-title: Cascade
-slug: Web/CSS/Cascade
-translation_of: Web/CSS/Cascade
----
-{{ CSSRef() }}
-
-
-
-Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS-правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: Cascading Style Sheets(Каскадные Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.
-
-What CSS entities participate in the cascade
-
-Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like {{ cssxref("@font-face")}} containing descriptors don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its font-family descriptor. If several @font-face with the same descriptor are defined, only the most adequate @font-face, as a whole, is considered.
-
-If the declarations contained in most at-rules participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.
-
-Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.
-
-Origin of CSS declarations
-
-The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:
-
-
- The browser has a basic style sheet that gives a default style to any document. These style sheets are named user-agent stylesheets . Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.
- The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.
- The reader , the user of the browser, may have a custom style sheet to tailor its experience.
-
-
-Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.
-
-Cascading order
-
-The cascading algorithm determines how to find the value to apply for each property for each document element.
-
-
- It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
- Then it sorts these rules according to their importance, that is, whether or not they are followed by !important, and by their origin. The cascade is in ascending order, which means that !important values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
-
-
-
- Origin
- Importance
-
-
-
-
- 1
- user agent
- normal
-
-
- 2
- user
- normal
-
-
- 3
- author
- normal
-
-
- 4
- CSS Animations
- see below
-
- 5
- author
- !important
-
- 6
- user
- !important
-
- 7
- user agent*
- !important
-
-
- * based on w3.org CSS3 specs
-
-
-
- In case of equality, the specificity of a value is considered to choose one or the other.
-
-
-CSS animations and the cascade
-
-CSS Animations , using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single @keyframes and never mixes several of them.
-
-When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.
-
-Also note that values within @keyframes at-rules overwrite all normal values but are overwritten by !important values.
-
-Example
-
-User-agent CSS:
-
-li { margin-left: 10px }
-
-Author CSS 1:
-
-li { margin-left: 0 } /* This is a reset */
-
-Author CSS 2:
-
-@media screen {
- li { margin-left: 3px }
-}
-
-@media print {
- li { margin-left: 1px }
-}
-
-
-User CSS:
-
-.specific { margin-left: 1em }
-
-HTML:
-
-<ul>
- <li class="specific">1<sup>st</sup></li>
- <li>2<sup>nd</sup></li>
-</ul>
-
-
-In this case, declarations inside li and .specific rules should apply. No declaration is marked as !important so the precedence order is author style sheets before user style sheets or user-agent stylesheet.
-
-So three declarations are in competition:
-
-margin-left: 0
-
-margin-left: 3px
-
-margin-left: 1px
-
-The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:
-
-margin-left: 3px
-
-Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.
-
-See also
-
-
- The very simple introduction of cascading in the CSS Tutorial.
- {{CSS_Key_Concepts()}}
-
diff --git a/files/ru/web/css/cascade/index.md b/files/ru/web/css/cascade/index.md
new file mode 100644
index 00000000000000..f695b68f3b7fa7
--- /dev/null
+++ b/files/ru/web/css/cascade/index.md
@@ -0,0 +1,113 @@
+---
+title: Cascade
+slug: Web/CSS/Cascade
+translation_of: Web/CSS/Cascade
+---
+{{ CSSRef() }}
+
+Каскадность это алгоритм, который определяет как совмещать и сочетать значения свойств происходящих из различных источников(CSS-правила могут располагаться как в самом веб-документе, так и во внешних файлах). Данный алгоритм лежит в основе CSS, как можно понять из его названия: _Cascading_ Style Sheets(_Каскадные_ Таблицы Стилей). Данная статья объясняет что такое каскадность, порядок в котором определяется какие свойства будут в конечном итоге выполнены и как это затрагивает вас, веб разработчика.
+
+## What CSS entities participate in the cascade
+
+Only CSS declarations, that is property/value pairs, participate in the cascade. That means that at-rules containing entities other than declarations, like {{ cssxref("@font-face")}} containing _descriptors_ don't participate in the cascade. In these case, only the at-rule as the whole participates in the cascade; here the @font-face identified by its `font-family` descriptor. If several `@font-face` with the same descriptor are defined, only the most adequate `@font-face`, as a whole, is considered.
+
+If the declarations contained in most [at-rules](/ru/docs/CSS/At-rule) participate in the cascade, like declarations contained in {{cssxref("@media")}}, {{cssxref("@documents")}}, or {{cssxref("@supports")}}, declarations contained in {{cssxref("@keyframes")}} doesn't. Like for {{cssxref("@font-face")}}, only the at-rule as a whole is selected via the cascade algorithm.
+
+Finally note that {{cssxref("@import")}} and {{cssxref("@charset")}} obey specific algorithms and aren't affected by the cascade algorithm.
+
+## Origin of CSS declarations
+
+The CSS cascade algorithm wants to select CSS declarations to set the correct value for CSS properties. CSS declarations originate from different origins:
+
+- The browser has a basic style sheet that gives a default style to any document. These style sheets are named **user-agent stylesheets**. Some browsers uses actual style sheets to perform this, while others simulate them in code, but both cases should be indetectable. Some browsers also allow users to modify the user-agent stylesheet. Although some constraints on user-agent stylesheets are set by the HTML specification, browsers still have a lot of latitude: that means that significant differences exist from one browser to another. To ease their development and lower the basic ground on which to work, Web developers often use a CSS reset style sheet, forcing common properties values to a known state.
+- The author of the Web page define styles for the document. These are the most common style sheets. Most of the time several of them are defined and they make the look and feel of the Web site — its theme.
+- The _reader_, the user of the browser, may have a custom style sheet to tailor its experience.
+
+Though style sheets come from these different origins, they overlap in scope: the cascade algorithm defines how they interact.
+
+## Cascading order
+
+The cascading algorithm determines how to find the value to apply for each property for each document element.
+
+1. It first filters all the rules from the different sources to keep only the rules that apply to a given element. That means rules whose selector matches the given element and which are part of an appropriate media at-rule.
+2. Then it sorts these rules according to their importance, that is, whether or not they are followed by `!important`, and by their origin. The cascade is in ascending order, which means that `!important` values from a user-defined style sheet have precedence over normal values originated from a user-agent style sheet:
+
+ | | Origin | Importance |
+ | --- | -------------- | ------------ |
+ | 1 | user agent | normal |
+ | 2 | user | normal |
+ | 3 | author | normal |
+ | 4 | CSS Animations | _see below_ |
+ | 5 | author | `!important` |
+ | 6 | user | `!important` |
+ | 7 | user agent\* | `!important` |
+
+ \* based on [w3.org CSS3 specs](https://www.w3.org/TR/css-cascade-3/#importance)
+
+
+
+1. In case of equality, the [specificity](/ru/docs/CSS/Specificity) of a value is considered to choose one or the other.
+
+## CSS animations and the cascade
+
+[CSS Animations](/ru/docs/CSS/Using_CSS_animations), using {{ cssxref("@keyframes")}} at-rules defines animations between states. Keyframes don't cascade, meaning that at any time CSS takes values from one single `@keyframes` and never mixes several of them.
+
+When several keyframes are appropriate, it chooses the latest defined in the most important document, but never combined all together.
+
+Also note that values within `@keyframes` at-rules overwrite all normal values but are overwritten by `!important` values.
+
+## Example
+
+**User-agent CSS:**
+
+ li { margin-left: 10px }
+
+**Author CSS 1:**
+
+ li { margin-left: 0 } /* This is a reset */
+
+**Author CSS 2:**
+
+ @media screen {
+ li { margin-left: 3px }
+ }
+
+ @media print {
+ li { margin-left: 1px }
+ }
+
+**User CSS:**
+
+ .specific { margin-left: 1em }
+
+**HTML:**
+
+
+
+In this case, declarations inside `li` and `.specific` rules should apply. No declaration is marked as `!important` so the precedence order is author style sheets before user style sheets or user-agent stylesheet.
+
+So three declarations are in competition:
+
+ margin-left: 0
+
+
+
+ margin-left: 3px
+
+
+
+ margin-left: 1px
+
+The last one is ignored (on a screen), and the two first have the same selector, hence the same specificity: it is the last one that is then selected:
+
+ margin-left: 3px
+
+Note that the declaration defined in the user CSS, though having a greater specifity, is not chosen as the cascade algorithm is applied before the specifity algorithm.
+
+## See also
+
+- The very simple [introduction](/ru/docs/CSS/Getting_Started/Cascading_and_inheritance "/en-US/docs/") of cascading in the CSS Tutorial.
+- {{CSS_Key_Concepts()}}
diff --git a/files/ru/web/css/child_combinator/index.html b/files/ru/web/css/child_combinator/index.html
deleted file mode 100644
index a1c742dcf2b33e..00000000000000
--- a/files/ru/web/css/child_combinator/index.html
+++ /dev/null
@@ -1,41 +0,0 @@
----
-title: Селектор дочерних элементов
-slug: Web/CSS/Child_combinator
-translation_of: Web/CSS/Child_combinator
----
-{{CSSRef("Selectors")}}
-
-Описание
-
-Комбинатор > разделяет 2 селектора, находит элементы заданные вторым селектором, являющие прямыми потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.
-
-Синтаксис
-
-selector1 > selector2 { style properties }
-
-
-Пример
-
-span { background-color: white; }
-div > span {
- background-color: DodgerBlue;
-}
-
-
-<div>
- <span>Span 1 в div
- <span>Span 2 в span, который в div</span>
- </span>
-</div>
-<span>Span 3. Не в div вообще</span>
-
-
-{{ EmbedLiveSample('Example', 200, 100) }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/child_combinator/index.md b/files/ru/web/css/child_combinator/index.md
new file mode 100644
index 00000000000000..1d01d5b9dfab5e
--- /dev/null
+++ b/files/ru/web/css/child_combinator/index.md
@@ -0,0 +1,42 @@
+---
+title: Селектор дочерних элементов
+slug: Web/CSS/Child_combinator
+translation_of: Web/CSS/Child_combinator
+---
+{{CSSRef("Selectors")}}
+
+## Описание
+
+`Комбинатор >` разделяет 2 селектора, находит элементы заданные вторым селектором, являющие **прямыми** потомками для элементов отобранных первым селектором. Напротив, два селектора в [селекторе потомков](/ru/docs/Web/CSS/Descendant_selectors) находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.
+
+## Синтаксис
+
+ selector1 > selector2 { style properties }
+
+## Пример
+
+```css
+span { background-color: white; }
+div > span {
+ background-color: DodgerBlue;
+}
+```
+
+```html
+
+ Span 1 в div
+ Span 2 в span, который в div
+
+
+Span 3. Не в div вообще
+```
+
+{{ EmbedLiveSample('Example', 200, 100) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/clamp/index.html b/files/ru/web/css/clamp/index.html
deleted file mode 100644
index e3715474447ac8..00000000000000
--- a/files/ru/web/css/clamp/index.html
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: clamp()
-slug: Web/CSS/clamp
-translation_of: Web/CSS/clamp()
-original_slug: Web/CSS/clamp()
----
-{{CSSRef}}
-
-CSS -функция clamp()
-
-clamp(MIN, VAL, MAX) вычисляется как {{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))
-
-/* свойство: clamp(expression{3}) */
-width: clamp(10px, 4em, 80px);
-
-В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.
-
-Давайте предположим, что в примере выше 1em равен 16px:
-
-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))) */
-width: max(10px, min(64px, 80px))
-width: max(10px, 64px);
-width: 64px;
-
-Синтаксис
-
-Функция clamp() принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.
-
-Минимальное значение – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".
-
-Предпочитаемое значение – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.
-
-Максимальное значение – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхнюю границу допустимого диапазона.
-
-Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции calc(). Также, можно использовать круглые скобки, чтобы задать порядок вычисление.
-
-Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.
-
-Примечания
-
-
- Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение auto.
- Допускается вкладывать функции max() и min() в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
- Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("<length>")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
- Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().
-
-
-
-
-{{CSSSyntax}}
-
-Примеры
-
-Установка минимального и максимального размера шрифта
-
-clamp() позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography , но в одну строку и без использования медиавыражений.
-
-p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
-
-
-<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.
-</p>
-
-
-{{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}
-
-Accessibility concerns
-
-TBD
-
-Specifications
-
-
-
-
- Specification
- Status
- Comment
-
-
-
-
- {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}}
- {{Spec2('CSS4 Values')}}
- Initial definition.
-
-
-
-
-Browser compatibility
-
-
-
-{{Compat}}
-
-See also
-
-
- {{CSSxRef("calc")}}
- {{CSSxRef("max")}}
- {{CSSxRef("min")}}
- CSS Values
diff --git a/files/ru/web/css/clamp/index.md b/files/ru/web/css/clamp/index.md
new file mode 100644
index 00000000000000..808cad9518a478
--- /dev/null
+++ b/files/ru/web/css/clamp/index.md
@@ -0,0 +1,96 @@
+---
+title: clamp()
+slug: Web/CSS/clamp
+translation_of: Web/CSS/clamp()
+original_slug: Web/CSS/clamp()
+---
+{{CSSRef}}
+
+[CSS](/ru/docs/Web/CSS)-функция **`clamp()`** задаёт значение в диапазоне между указанными нижней и верхней границами. Функция принимает три аргумента: минимальное значение, предпочитаемое значение и максимально допустимое. Может использоваться везде, где допускается применение {{CSSxRef("<length>")}}, {{CSSxRef("<frequency>")}}, {{CSSxRef("<angle>")}}, {{CSSxRef("<time>")}}, {{CSSxRef("<percentage>")}}, {{CSSxRef("<number>")}}, или {{CSSxRef("<integer>")}}.
+
+`clamp(MIN, VAL, MAX)` вычисляется как `{{CSSxRef("max", "max")}}(MIN, {{CSSxRef("min", "min")}}(VAL, MAX))`
+
+```css
+/* свойство: clamp(expression{3}) */
+width: clamp(10px, 4em, 80px);
+```
+
+В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.
+
+Давайте предположим, что в примере выше 1em равен 16px:
+
+```css
+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))) */
+width: max(10px, min(64px, 80px))
+width: max(10px, 64px);
+width: 64px;
+```
+
+## Синтаксис
+
+Функция `clamp()` принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.
+
+_Минимальное значение_ – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".
+
+_Предпочитаемое значение_ – это выражение, чей результат будет использовать до тех пор, пока будет оставаться в пределах допустимого диапазона значений.
+
+_Максимальное значение_ – наибольшее значение, которое будет устанавливаться, если предпочитаемое будет превышать верхнюю границу допустимого диапазона.
+
+Передаваемые значения могут быть математическими функциями (более подробно смотрите на {{CSSxRef("calc")}}), точными значениями, или другими выражениями, такими как {{CSSxRef("attr", "attr()")}}, результатом которых является допустимый тип аргумента (как например {{CSSxRef("<length>")}}), или вложенные {{CSSxRef("min")}} и {{CSSxRef("max")}} функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции `calc()`. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.
+
+Можно использовать разные единицы измерения для каждого значения в выражении и разные единицы измерения в любой математической функции, .являющейся частью любого из аргументов.
+
+### Примечания
+
+- Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение `auto`.
+- Допускается вкладывать функции `max()` и `min()` в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
+- Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (\*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса {{CSSxRef ("<length>")}}. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
+- Часто вам может понадобиться использовать {{CSSxRef ("min")}} и {{CSSxRef ("max")}} в функции clamp ().
+
+### Formal syntax
+
+{{CSSSyntax}}
+
+## Примеры
+
+### Установка минимального и максимального размера шрифта
+
+`clamp()` позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в [Fluid Typography](https://css-tricks.com/snippets/css/fluid-typography/), но в одну строку и без использования медиавыражений.
+
+```css
+p { font-size: clamp(1rem, 2.5vw, 1.5rem); }
+```
+
+```html
+
+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.
+
+```
+
+{{EmbedLiveSample("Установка_минимального_и_максимального_размера_шрифта", "100%", "300")}}
+
+## Accessibility concerns
+
+TBD
+
+## Specifications
+
+| Specification | Status | Comment |
+| ---------------------------------------------------------------------------- | -------------------------------- | ------------------- |
+| {{SpecName("CSS4 Values", "#calc-notation", "clamp()")}} | {{Spec2('CSS4 Values')}} | Initial definition. |
+
+## Browser compatibility
+
+{{Compat}}
+
+## See also
+
+- {{CSSxRef("calc")}}
+- {{CSSxRef("max")}}
+- {{CSSxRef("min")}}
+- [CSS Values](/ru/docs/Learn/CSS/Introduction_to_CSS/Values_and_units)
diff --git a/files/ru/web/css/class_selectors/index.html b/files/ru/web/css/class_selectors/index.html
deleted file mode 100644
index 544fd58fbaa335..00000000000000
--- a/files/ru/web/css/class_selectors/index.html
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Селекторы по классу
-slug: Web/CSS/Class_selectors
-translation_of: Web/CSS/Class_selectors
----
-{{CSSRef("Selectors")}}
-
-Краткое описание
-
-В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.
-
-Синтаксис
-
-.classname { style properties }
-
-Это эквивалентно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:
-
-[class~=classname] { style properties }
-
-Пример
-
-CSS
-
-span.classy {
- background-color: DodgerBlue;
-}
-
-
-HTML
-
-<span class="classy">Здесь span с каким-то текстом.</span>
-<span>А тут другой span.</span>
-
-
-{{ EmbedLiveSample('Example', 200, 50) }}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/class_selectors/index.md b/files/ru/web/css/class_selectors/index.md
new file mode 100644
index 00000000000000..9588285f82d42d
--- /dev/null
+++ b/files/ru/web/css/class_selectors/index.md
@@ -0,0 +1,45 @@
+---
+title: Селекторы по классу
+slug: Web/CSS/Class_selectors
+translation_of: Web/CSS/Class_selectors
+---
+{{CSSRef("Selectors")}}
+
+## Краткое описание
+
+В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.
+
+## Синтаксис
+
+ .classname { style properties }
+
+Это эквивалентно следующему {{ Cssxref("Attribute_selectors", "селектор по атрибуту") }}:
+
+ [class~=classname] { style properties }
+
+## Пример
+
+### CSS
+
+```css
+span.classy {
+ background-color: DodgerBlue;
+}
+```
+
+### HTML
+
+```html
+Здесь span с каким-то текстом.
+А тут другой span.
+```
+
+{{ EmbedLiveSample('Example', 200, 50) }}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/clear/index.html b/files/ru/web/css/clear/index.html
deleted file mode 100644
index 3a49c7cf475003..00000000000000
--- a/files/ru/web/css/clear/index.html
+++ /dev/null
@@ -1,232 +0,0 @@
----
-title: clear
-slug: Web/CSS/clear
-tags:
- - CSS
- - Справка
-translation_of: Web/CSS/clear
----
-{{CSSRef}}
-
-Свойство clearfloating элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство clear применяется как к плавающим, так и к неплавающим элементам.
-
-{{EmbedInteractiveExample("pages/css/clear.html")}}
-
-При применении к неплавающим блокам он перемещает границу края border edge элемента до тех пор, пока не окажется ниже края margin edge поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.
-
-Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам - margin edge нижнего элемента перемещается ниже margin edge всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.
-
-Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же контексте форматирования блоков .
-
-
-
Примечание: Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется clearfix, и один из способов сделать это - это заменит clear заменённый {{cssxref("::after")}} псевдоэлемент на нем.
-
-
#container::after {
- content: "";
- display: block;
- clear: both;
-}
-
-
Синтаксис
-
-/* Значения ключевых слов */
-clear: none;
-clear: left;
-clear: right;
-clear: both;
-clear: inline-start;
-clear: inline-end;
-
-/* Global values */
-clear: inherit;
-clear: initial;
-clear: unset;
-
-
-Значения
-
-
- noneЯвляется ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
- leftЯвляется ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить левые поплавки.
- rightЯвляется ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые правые поплавки.
- bothЭто ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
- inline-startЯвляется ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в начале содержащего его блока , то есть левые поплавки на скриптах ltr и правые поплавки на скриптах rtl .
- inline-endЯвляется ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков в конце содержащего его блока , то есть правые поплавки на скриптах ltr и левые поплавки на скриптах rtl .
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-clear: left
-
-HTML
-
-<div class="wrapper">
- <p class="black">Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
- <p class="red">Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
- <p class="left">Этот абзац очищается слева.</p>
-</div>
-
-
-CSS
-
-.wrapper{
- border:1px solid black;
- padding:10px;
-}
-.left {
- border: 1px solid black;
- clear: left;
-}
-.black {
- float: left;
- margin: 0;
- background-color: black;
- color: #fff;
- width: 20%;
-}
-.red {
- float: left;
- margin: 0;
- background-color: pink;
- width:20%;
-}
-p {
- width: 50%;
-}
-
-
-{{EmbedLiveSample('clear_left','100%','250')}}
-
-clear: right
-
-HTML
-
-<div class="wrapper">
- <p class="black">Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
- <p class="red">- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
- <p class="right">Этот абзац очищается справа.</p>
-</div>
-
-
-CSS
-
-.wrapper{
- border:1px solid black;
- padding:10px;
-}
-.right {
- border: 1px solid black;
- clear: right;
-}
-.black {
- float: right;
- margin: 0;
- background-color: black;
- color: #fff;
- width:20%;
-}
-.red {
- float: right;
- margin: 0;
- background-color: pink;
- width:20%;
-}
-p {
- width: 50%;
-}
-
-{{EmbedLiveSample('clear_right','100%','250')}}
-
-clear: both
-
-HTML
-
-<div class="wrapper">
- <p class="black">Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>
- <p class="red">Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".</p>
- <p class="both">Этот абзац очищает оба.</p>
-</div>
-
-
-CSS
-
-.wrapper{
- border:1px solid black;
- padding:10px;
-}
-.both {
- border: 1px solid black;
- clear: both;
-}
-.black {
- float: left;
- margin: 0;
- background-color: black;
- color: #fff;
- width:20%;
-}
-.red {
- float: right;
- margin: 0;
- background-color: pink;
- width:20%;
-}
-p {
- width: 45%;
-}
-
-{{EmbedLiveSample('clear_both','100%','300')}}
-
-Характеристики
-
-
-
-
- Спецификация
- Статус
- Коммент
-
-
-
-
- {{SpecName('CSS Logical Properties', '#float-clear', 'float and clear')}}
- {{Spec2('CSS Logical Properties')}}
- Добавляет значения inline-start и inline-end.
-
-
- {{SpecName('CSS2.1', 'visuren.html#flow-control', 'clear')}}
- {{Spec2('CSS2.1')}}
- Никаких существенных изменений, хотя детали уточняются.
-
-
- {{SpecName('CSS1', '#clear', 'clear')}}
- {{Spec2('CSS1')}}
- Начальное определение
-
-
-
-
-{{cssinfo}}
-
-Совместимость с браузером
-{{Compat}}
-
-
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/clear/index.md b/files/ru/web/css/clear/index.md
new file mode 100644
index 00000000000000..3bdfb49135555f
--- /dev/null
+++ b/files/ru/web/css/clear/index.md
@@ -0,0 +1,215 @@
+---
+title: clear
+slug: Web/CSS/clear
+tags:
+ - CSS
+ - Справка
+translation_of: Web/CSS/clear
+---
+{{CSSRef}}
+
+Свойство **`clear`** CSS указывает, может ли элемент быть рядом с плавающими [floating](/ru/docs/CSS/float "CSS/float") элементами, которые предшествуют ему или должны быть перемещены вниз (очищены) под ними. Свойство `clear` применяется как к плавающим, так и к неплавающим элементам.
+
+{{EmbedInteractiveExample("pages/css/clear.html")}}
+
+При применении к неплавающим блокам он перемещает границу края [border edge](/ru/docs/CSS/box_model "CSS/box_model") элемента до тех пор, пока не окажется ниже края [margin edge](/ru/docs/CSS/box_model "CSS/box_model") поля всех соответствующих поплавков. Вертикальный край неплавающего блока сжимается.
+
+Вертикальные поля между двумя плавающими элементами, с другой стороны, не будут разрушаться. При применении к плавающим элементам - [margin edge](/ru/docs/CSS/box_model "CSS/box_model") нижнего элемента перемещается ниже [margin edge](/ru/docs/CSS/box_model "CSS/box_model") всех соответствующих поплавков. Это влияет на положение более поздних поплавков, поскольку более поздние поплавки не могут быть расположены выше предыдущих.
+
+Поплавки, которые имеют отношение к очистке, - это более ранние поплавки в одном и том же [контексте форматирования блоков](/ru/docs/CSS/block_formatting_context "CSS/block_formatting_context").
+
+> **Примечание:** **Примечание:** Если элемент содержит только плавающие элементы, его высота сворачивается в ничто. Если вы хотите, чтобы он всегда мог изменять размер, чтобы он содержал в себе плавающие элементы, вам нужно самоочистить своих детей. Это называется **clearfix,** и один из способов сделать это - это заменит `clear` заменённый {{cssxref("::after")}} [псевдоэлемент](/ru/docs/Web/CSS/Pseudo-elements) на нем.```css
+> #container::after {
+> content: "";
+> display: block;
+> clear: both;
+> }
+>
+> ```
+>
+> ```
+
+## Синтаксис
+
+```css
+/* Значения ключевых слов */
+clear: none;
+clear: left;
+clear: right;
+clear: both;
+clear: inline-start;
+clear: inline-end;
+
+/* Global values */
+clear: inherit;
+clear: initial;
+clear: unset;
+```
+
+### Значения
+
+- `none`
+ - : Является ключевым словом, указывающим, что элемент не перемещается вниз, чтобы очистить предыдущие плавающие элементы.
+- `left`
+ - : Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы очистить _левые_ поплавки.
+- `right`
+ - : Является ключевым словом, указывающим, что элемент перемещается вниз, чтобы удалить прошлые _правые_ поплавки.
+- `both`
+ - : Это ключевое слово, указывающее, что элемент перемещается вниз, чтобы очистить как левые, так и правые поплавки.
+- `inline-start`
+ - : Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков _в начале содержащего его блока_, то есть _левые_ поплавки на скриптах **ltr** и _правые_ поплавки на скриптах **rtl**.
+- `inline-end`
+ - : Является ключевым словом, указывающим, что элемент перемещается вниз для очистки поплавков _в конце содержащего его блока_, то есть _правые_ поплавки на скриптах **ltr** и _левые_ поплавки на скриптах **rtl**.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### clear: left
+
+#### HTML
+
+```html
+
+
Давай лучше "бёзди хэппи" затянем, нежели Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.
+
Пусть бегут неуклюже пешеходы по лужам, Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Этот абзац очищается слева.
+
+
Лучше нести бред и околесицу, но более осмысленную, чем Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
- Так я ж намедни намекал, что Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
+
Этот абзац очищается справа.
+
+
Лучше нести осмысленную белиберду, чем "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.
+
Вот я и говорю, что "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor".
+
Этот абзац очищает оба.
+
{{CSSRef}}{{SeeCompatTable}}
-
-CSS свойство clip-path circle()
-
-
-
Историческая справка: Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .
-
/* Keyword values */
-clip-path: none;
-
-/* Image values */
-clip-path: url(resources.svg#c1);
-
-/* Box values */
-clip-path: fill-box;
-clip-path: stroke-box;
-clip-path: view-box;
-clip-path: margin-box;
-clip-path: border-box;
-clip-path: padding-box;
-clip-path: content-box;
-
-/* Geometry values */
-clip-path: inset(100px 50px);
-clip-path: circle(50px at 0 100px);
-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
-
-/* Box and geometry values combined */
-clip-path: padding-box circle(50px at 0 100px);
-
-/* Global values */
-clip-path: inherit;
-clip-path: initial;
-clip-path: unset;
-
-
-
-<svg class="defs">
- <defs>
- <clipPath id="myPath" clipPathUnits="objectBoundingBox">
- <path d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
- </clipPath>
- </defs>
-</svg>
-
-<div class="grid">
- <div class="col">
- <div class="note">clip-path: none</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="none">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="none">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: url(#myPath)<br><br>
- Assuming the following clipPath definition:
- <pre>
-<svg>
- <clipPath id="myPath" clipPathUnits="objectBoundingBox">
- <path d="M0.5,1
- C 0.5,1,0,0.7,0,0.3
- A 0.25,0.25,1,1,1,0.5,0.3
- A 0.25,0.25,1,1,1,1,0.3
- C 1,0.7,0.5,1,0.5,1 Z" />
- </clipPath>
-</svg></pre>
- </div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="svg">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="svg">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
- </div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="svg2">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="svg2">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
-
-
- <div class="note">clip-path: circle(25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape1">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape1">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape2">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape2">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape3">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape3">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape4">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape4">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape5">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape5">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape6">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape6">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape7">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape7">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape8">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape8">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
-
- <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
- <div class="row">
- <div class="cell"> <span>HTML</span>
- <div class="container">
- <p class="shape9">
- I LOVE<br><em>clipping</em>
- </p>
- </div>
- </div>
- <div class="cell"> <span>SVG</span>
- <div class="container viewbox">
- <svg viewBox="0 0 192 192">
- <g class="shape9">
- <rect x="24" y="24" width="144" height="144" />
- <text x="96" y="91">I LOVE</text>
- <text x="96" y="109" class="em">clipping</text>
- </g>
- </svg>
- </div>
- </div>
- </div>
- </div>
-</div>
-
-html,body {
- height: 100%;
- box-sizing: border-box;
- background: #EEE;
-}
-
-.grid {
- width: 100%;
- height: 100%;
- display: flex;
- font: 1em monospace;
-}
-
-.row {
- display: flex;
- flex: 1 auto;
- flex-direction: row;
- flex-wrap: wrap;
-}
-
-.col {
- flex: 1 auto;
-}
-
-.cell {
- margin: .5em;
- padding: .5em;
- background-color: #FFF;
- overflow: hidden;
- text-align: center;
- flex: 1;
-}
-
-.note {
- background: #fff3d4;
- padding: 1em;
- margin: .5em .5em 0;
- font: .8em sans-serif;
- text-align: left;
- white-space: nowrap;
-}
-
-.note + .row .cell {
- margin-top: 0;
-}
-
-.container {
- display: inline-block;
- border: 1px dotted grey;
- position:relative;
-}
-
-.container:before {
- content: 'margin';
- position: absolute;
- top: 2px;
- left: 2px;
- font: italic .6em sans-serif;
-}
-
-.viewbox {
- box-shadow: 1rem 1rem 0 #EFEFEF inset, -1rem -1rem 0 #EFEFEF inset;
-}
-
-.container.viewbox:after {
- content: 'viewbox';
- position: absolute;
- left: 1.1rem;
- top: 1.1rem;
- font: italic .6em sans-serif;
-}
-
-.cell span {
- display: block;
- margin-bottom: .5em;
-}
-
-p {
- font-family: sans-serif;
- background: #000;
- color: pink;
- margin: 2em;
- padding: 3em 1em;
- border: 1em solid pink;
- width: 6em;
-}
-
-.none { clip-path: none; }
-.svg { clip-path: url(#myPath); }
-.svg2 { clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z');}
-.shape1 { clip-path: circle(25%); }
-.shape2 { clip-path: circle(25% at 25% 25%); }
-.shape3 { clip-path: fill-box circle(25% at 25% 25%); }
-.shape4 { clip-path: stroke-box circle(25% at 25% 25%); }
-.shape5 { clip-path: view-box circle(25% at 25% 25%); }
-.shape6 { clip-path: margin-box circle(25% at 25% 25%); }
-.shape7 { clip-path: border-box circle(25% at 25% 25%); }
-.shape8 { clip-path: padding-box circle(25% at 25% 25%); }
-.shape9 { clip-path: content-box circle(25% at 25% 25%); }
-
-.defs {
- width: 0;
- height: 0;
- margin: 0;
-}
-
-pre { margin-bottom: 0; }
-
-svg {
- margin: 1em;
- font-family: sans-serif;
- width: 192px;
- height: 192px;
-}
-
-svg rect {
- stroke: pink;
- stroke-width: 16px;
-}
-
-svg text {
- fill: pink;
- text-anchor: middle;
-}
-
-svg text.em {
- font-style: italic;
-}
-
-{{EmbedLiveSample("clip-path", "100%", 800, "", "", "example-outcome-frame")}}
-
-{{cssinfo}}
-
-Синтаксис
-
-Свойство clip-path определяется как одно или комбинация значений перечисленных ниже.
-
-Значения
-
-
- url()Представляет URL ссылку на траекторию, ограничивающую элемент.
- inset(), circle(), ellipse(), polygon()Функция {{cssxref("<basic-shape>")}}. Размер и положение области определяется значением <geometry-box>. Если геометрия не определена,border-box будет использоваться в качестве блока.
- <geometry-box>Если определён в комбинации с <basic-shape>, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:
-
- fill-boxИспользует границы объекта в качестве базовой области.
- stroke-boxИспользует stroke bounding box в качестве базовой области.
- view-boxИспользует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом viewBox и ширина и высота базового блока устанавливаются равными значениям атрибута viewBox.
- margin-boxИспользует margin box в качестве базового блока.
- border-boxИспользует border box в качестве базового блока.
- padding-boxИспользует padding box в качестве базового блока.
- content-boxИспользует content box в качестве базового блока.
-
-
- noneОбрезанная область не создается.
-
-
-Формальный синтаксис.
-
-{{csssyntax}}
-
-Примеры
-
-/* Inline SVG */
-.target {
- clip-path: url(#c1);
-}
-
-/* External SVG */
-.anothertarget {
- clip-path: url(resources.svg#c1);
-}
-
-/* Circle shape */
-.circleClass {
- clip-path: circle(15px at 20px 20px);
-}
-
-Живой пример
-
-HTML
-
-<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
- alt="MDN logo">
-<svg height="0" width="0">
- <defs>
- <clipPath id="cross">
- <rect y="110" x="137" width="90" height="90"/>
- <rect x="0" y="110" width="90" height="90"/>
- <rect x="137" y="0" width="90" height="90"/>
- <rect x="0" y="0" width="90" height="90"/>
- </clipPath>
- </defs>
-</svg>
-
-<select id="clipPath">
- <option value="none">none</option>
- <option value="circle(100px at 110px 100px)">circle</option>
- <option value="url(#cross)" selected>cross</option>
- <option value="inset(20px round 20px)">inset</option>
-</select>
-
-
-CSS
-
-#clipped {
- margin-bottom: 20px;
- clip-path: url(#cross);
-}
-
-
-
-
JavaScript
-
-
var clipPathSelect = document.getElementById("clipPath");
-clipPathSelect.addEventListener("change", function (evt) {
- document.getElementById("clipped").style.clipPath = evt.target.value;
-});
-
-
Результат
-
-{{EmbedLiveSample("Живой_пример", 230, 250)}}
-
-Спецификации
-
-
-
-
- Спецификация
- Статус
- Комментарий
-
-
-
-
- {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}}
- {{Spec2('CSS Masks')}}
- Extends its application to HTML elements.
-
-
- {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}}
- {{Spec2('SVG1.1')}}
- Initial definition (applies to SVG elements only).
-
-
-
-
-Совместимость
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/clip-path/index.md b/files/ru/web/css/clip-path/index.md
new file mode 100644
index 00000000000000..3fd3263c220560
--- /dev/null
+++ b/files/ru/web/css/clip-path/index.md
@@ -0,0 +1,583 @@
+---
+title: clip-path
+slug: Web/CSS/clip-path
+translation_of: Web/CSS/clip-path
+---
+{{CSSRef}}{{SeeCompatTable}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`clip-path`** создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Те части, которые находятся внутри области, видимы, в то время как части вне области, скрыты. Обрезанная область - это траектория, определяемая либо как внутренняя ссылка, либо как внешний SVG , либо как фигура, такая как круг ([`circle()`](https://developer.mozilla.org/ru/docs/Web/SVG/%D0%AD%D0%BB%D0%B5%D0%BC%D0%B5%D0%BD%D1%82/circle)).
+
+> **Примечание:** **Историческая справка:** Свойство clip-path заменило устаревшее свойство {{cssxref("clip")}} .
+
+```css
+/* Keyword values */
+clip-path: none;
+
+/* Image values */
+clip-path: url(resources.svg#c1);
+
+/* Box values */
+clip-path: fill-box;
+clip-path: stroke-box;
+clip-path: view-box;
+clip-path: margin-box;
+clip-path: border-box;
+clip-path: padding-box;
+clip-path: content-box;
+
+/* Geometry values */
+clip-path: inset(100px 50px);
+clip-path: circle(50px at 0 100px);
+clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+
+/* Box and geometry values combined */
+clip-path: padding-box circle(50px at 0 100px);
+
+/* Global values */
+clip-path: inherit;
+clip-path: initial;
+clip-path: unset;
+```
+
+```html hidden
+
+
+
+
+
+
+
+
+
+
clip-path: none
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: url(#myPath)
+ Assuming the following clipPath definition:
+
+<svg>
+ <clipPath id="myPath" clipPathUnits="objectBoundingBox">
+ <path d="M0.5,1
+ C 0.5,1,0,0.7,0,0.3
+ A 0.25,0.25,1,1,1,0.5,0.3
+ A 0.25,0.25,1,1,1,1,0.3
+ C 1,0.7,0.5,1,0.5,1 Z" />
+ </clipPath>
+</svg>
+
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z')
+
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
+
+
clip-path: circle(25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: fill-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: stroke-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: view-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: margin-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: border-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: padding-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
clip-path: content-box circle(25% at 25% 25%)
+
+
+
SVG
+
+
+
+ I LOVE
+ clipping
+
+
+
+
+
+
+
`. Если геометрия не определена,`border-box` будет использоваться в качестве блока.
+- ``
+ - : Если определён в комбинации с ``, это значение определяет блок для базовой области. Если задан самостоятельно, определяет границы блока, включая формирование углов (такое как {{cssxref("border-radius")}}). Геометрия может быть определена с помощью одного из следующих значений:_ `fill-box`
+ _ : Использует границы объекта в качестве базовой области.
+ - `stroke-box`
+ - : Использует stroke bounding box в качестве базовой области.
+ - `view-box`
+ - : Использует ближайший SVG viewport в качестве базового блока. Если атрибут {{SVGAttr("viewBox")}} определён для элемента, создающего SVG viewport, базовый блок позиционируется в оригинальной системе координат, установленной атрибутом `viewBox` и ширина и высота базового блока устанавливаются равными значениям атрибута `viewBox`.
+ - `margin-box`
+ - : Использует [margin box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
+ - `border-box`
+ - : Использует [border box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
+ - `padding-box`
+ - : Использует [padding box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
+ - `content-box`
+ - : Использует [content box](CSS_Box_Model/Introduction_to_the_CSS_box_model) в качестве базового блока.
+- `none`
+ - : Обрезанная область не создается.
+
+### Формальный синтаксис.
+
+{{csssyntax}}
+
+## Примеры
+
+```css
+/* Inline SVG */
+.target {
+ clip-path: url(#c1);
+}
+
+/* External SVG */
+.anothertarget {
+ clip-path: url(resources.svg#c1);
+}
+
+/* Circle shape */
+.circleClass {
+ clip-path: circle(15px at 20px 20px);
+}
+```
+
+## Живой пример
+
+### HTML
+
+```html
+
+
+
+
+
+
+
+
+ none
+ circle
+ cross
+ inset
+
+```
+
+### CSS
+
+```css
+#clipped {
+ margin-bottom: 20px;
+ clip-path: url(#cross);
+}
+```
+
+```js hidden
+var clipPathSelect = document.getElementById("clipPath");
+clipPathSelect.addEventListener("change", function (evt) {
+ document.getElementById("clipped").style.clipPath = evt.target.value;
+});
+```
+
+### Результат
+
+{{EmbedLiveSample("Живой_пример", 230, 250)}}
+
+## Спецификации
+
+| Спецификация | Статус | Комментарий |
+| -------------------------------------------------------------------------------------------- | ---------------------------- | -------------------------------------------------- |
+| {{SpecName("CSS Masks", "#the-clip-path", 'clip-path')}} | {{Spec2('CSS Masks')}} | Extends its application to HTML elements. |
+| {{SpecName('SVG1.1', 'masking.html#ClipPathProperty', 'clip-path')}} | {{Spec2('SVG1.1')}} | Initial definition (applies to SVG elements only). |
+
+## Совместимость
+
+{{Compat}}
+
+## Смотрите также
+
+- [clip-rule](/ru/docs/Web/SVG/Attribute/clip-rule), {{cssxref("mask")}}, {{cssxref("filter")}}
+- [CSS Shapes, clipping and masking – and how to use them](https://hacks.mozilla.org/2017/06/css-shapes-clipping-and-masking/)
+- [Applying SVG effects to HTML content](/ru/docs/Applying_SVG_effects_to_HTML_content)
+- {{SVGAttr("clip-path")}} SVG attribute
diff --git a/files/ru/web/css/color_value/index.html b/files/ru/web/css/color_value/index.html
deleted file mode 100644
index 679603221c66a9..00000000000000
--- a/files/ru/web/css/color_value/index.html
+++ /dev/null
@@ -1,1514 +0,0 @@
----
-title:
-slug: Web/CSS/color_value
-translation_of: Web/CSS/color_value
----
-{{CSSRef}}
-
-Тип <color>CSS data type предоставляет цвет в цветовом спектре sRGB . В <color> может включать значения прозрачности Альфа-канала (alpha-channel ), указывающие, как цвет сочетается с его фоном.
-
-В <color> может быть определена любым из следующих способов can.
-
-
-
-
-
Примечание: В этой статье подробно описывается тип данных <color>. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к элементам HTML с помощью CSS .
-
Синтаксис
-
-Для типа данных задаётся <color> с помощью одного из следующих параметров.
-
-
-
Примечание: значения <color> точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили устройств вывода .
-
Ключевые цвета
-
-Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например red, blue, black или lightseagreen. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.
-
-Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:
-
-
- HTML распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и SVG .В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
- Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
- Несколько ключевых слов являются псевдонимами друг для друга:
-
- aqua / cyanfuchsia / magentadarkgray / darkgreydarkslategray / darkslategreydimgray / dimgreylightgray / lightgreylightslategray / lightslategreygray / greyslategray / slategrey
-
- Хотя многие ключевые слова были адаптированы из X11 , их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.
-
-
-
-
Примечание: Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:
-
-
- CSS Level 1 включал только 16 основных цветов, называемых цветами VGA , поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
- CSS Level 2 добавил ключевое слово orange.
- Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми ключевыми словами, цветами X11 или цветами SVG.
- CSS Colors Level 4 добавил ключевое слово rebeccapurple, чтобы почтить пионера веб-Эрика Мейера.
-
-
-
-
- Спецификация
- Эквивалент RGB
- Ключевое слово
- RGB hex значение
- Видео сайта
-
-
-
-
- {{SpecName("CSS1")}}
- black#000000
-
- silver#c0c0c0
-
- gray#808080
-
- white#ffffff
-
- maroon#800000
-
- red#ff0000
-
- purple#800080
-
- fuchsia#ff00ff
-
- green#008000
-
- lime#00ff00
-
- olive#808000
-
- yellow#ffff00
-
- navy#000080
-
- blue#0000ff
-
- teal#008080
-
- aqua#00ffff
-
- {{SpecName("CSS2.1")}}
- orange#ffa500
-
- {{SpecName("CSS3 Colors")}}
- aliceblue#f0f8ff
-
- antiquewhite#faebd7
-
- aquamarine#7fffd4
-
- azure#f0ffff
-
- beige#f5f5dc
-
- bisque#ffe4c4
-
- blanchedalmond#ffebcd
-
- blueviolet#8a2be2
-
- brown#a52a2a
-
- burlywood#deb887
-
- cadetblue#5f9ea0
-
- chartreuse#7fff00
-
- chocolate#d2691e
-
- coral#ff7f50
-
- cornflowerblue#6495ed
-
- cornsilk#fff8dc
-
- crimson#dc143c
-
- cyanaqua)#00ffff
-
- darkblue#00008b
-
- darkcyan#008b8b
-
- darkgoldenrod#b8860b
-
- darkgray#a9a9a9
-
- darkgreen#006400
-
- darkgrey#a9a9a9
-
- darkkhaki#bdb76b
-
- darkmagenta#8b008b
-
- darkolivegreen#556b2f
-
- darkorange#ff8c00
-
- darkorchid#9932cc
-
- darkred#8b0000
-
- darksalmon#e9967a
-
- darkseagreen#8fbc8f
-
- darkslateblue#483d8b
-
- darkslategray#2f4f4f
-
- darkslategrey#2f4f4f
-
- darkturquoise#00ced1
-
- darkviolet#9400d3
-
- deeppink#ff1493
-
- deepskyblue#00bfff
-
- dimgray#696969
-
- dimgrey#696969
-
- dodgerblue#1e90ff
-
- firebrick#b22222
-
- floralwhite#fffaf0
-
- forestgreen#228b22
-
- gainsboro#dcdcdc
-
- ghostwhite#f8f8ff
-
- gold#ffd700
-
- goldenrod#daa520
-
- greenyellow#adff2f
-
- grey#808080
-
- honeydew#f0fff0
-
- hotpink#ff69b4
-
- indianred#cd5c5c
-
- indigo#4b0082
-
- ivory#fffff0
-
- khaki#f0e68c
-
- lavender#e6e6fa
-
- lavenderblush#fff0f5
-
- lawngreen#7cfc00
-
- lemonchiffon#fffacd
-
- lightblue#add8e6
-
- lightcoral#f08080
-
- lightcyan#e0ffff
-
- lightgoldenrodyellow#fafad2
-
- lightgray#d3d3d3
-
- lightgreen#90ee90
-
- lightgrey#d3d3d3
-
- lightpink#ffb6c1
-
- lightsalmon#ffa07a
-
- lightseagreen#20b2aa
-
- lightskyblue#87cefa
-
- lightslategray#778899
-
- lightslategrey#778899
-
- lightsteelblue#b0c4de
-
- lightyellow#ffffe0
-
- limegreen#32cd32
-
- linen#faf0e6
-
- magentafuchsia)#ff00ff
-
- mediumaquamarine#66cdaa
-
- mediumblue#0000cd
-
- mediumorchid#ba55d3
-
- mediumpurple#9370db
-
- mediumseagreen#3cb371
-
- mediumslateblue#7b68ee
-
- mediumspringgreen#00fa9a
-
- mediumturquoise#48d1cc
-
- mediumvioletred#c71585
-
- midnightblue#191970
-
- mintcream#f5fffa
-
- mistyrose#ffe4e1
-
- moccasin#ffe4b5
-
- navajowhite#ffdead
-
- oldlace#fdf5e6
-
- olivedrab#6b8e23
-
- orangered#ff4500
-
- orchid#da70d6
-
- palegoldenrod#eee8aa
-
- palegreen#98fb98
-
- paleturquoise#afeeee
-
- palevioletred#db7093
-
- papayawhip#ffefd5
-
- peachpuff#ffdab9
-
- peru#cd853f
-
- pink#ffc0cb
-
- plum#dda0dd
-
- powderblue#b0e0e6
-
- rosybrown#bc8f8f
-
- royalblue#4169e1
-
- saddlebrown#8b4513
-
- salmon#fa8072
-
- sandybrown#f4a460
-
- seagreen#2e8b57
-
- seashell#fff5ee
-
- sienna#a0522d
-
- skyblue#87ceeb
-
- slateblue#6a5acd
-
- slategray#708090
-
- slategrey#708090
-
- snow#fffafa
-
- springgreen#00ff7f
-
- steelblue#4682b4
-
- tan#d2b48c
-
- thistle#d8bfd8
-
- tomato#ff6347
-
- turquoise#40e0d0
-
- violet#ee82ee
-
- wheat#f5deb3
-
- whitesmoke#f5f5f5
-
- yellowgreen#9acd32
-
- {{SpecName("CSS4 Colors")}}
- rebeccapurple#663399
-
-
-
-
-
-Ключевое слово transparent представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически transparent - это ярлык для rgba (0,0,0,0).
-
-
-
Примечание по совместимости: чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что transparent должен быть вычислен в Альфа-предварительно умноженном цветовом пространстве . Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением 0.
-
-
Историческая запись: transparent не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения <color> для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, transparent был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение <color>.
-
Ключевое слово currentColor представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение color для свойств, которые не получают его по умолчанию.
-
-Если текущий цвет используется в качестве значения свойства color , он вместо этого принимает его значение из наследуемого значения свойства color.
-
-currentColor пример
-
-<div style="color:blue; border: 1px dashed currentColor;">
- Цвет текста-синий.
- <div style="background:currentColor; height:9px;"></div>
- This block is surrounded by a blue border.
-</div>
-
-{{EmbedLiveSample("currentColor_пример")}}
-
-RGB цвет
-
-Цветовая модель RGB определяет заданный цвет в соответствии с его красными, зелёными и синими компонентами. Дополнительный Альфа-компонент представляет прозрачность цвета.
-
-Синтаксис
-
-Цвета RGB могут быть выражены как шестнадцатеричными (с префиксом #), так и функциональными (rgb (), rgba ()) нотациями.
-
-
-
Примечание: начиная с уровня цветов CSS 4, rgba() является псевдонимом для rgb(). В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
-
- Шестнадцатеричное представление: #RRGGBB[AA]
- R (red), G (green), B (blue), and A (alpha) are hexadecimal characters (0-9, A-F). A is optional. For example, #ff0000 is equivalent to #ff0000ff. R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Например, #ff0000 эквивалентно #ff0000ff.Шестнадцатеричное представление: #RGB[A]
- R (красный), G (зелёный), B (синий) и A (Альфа) являются шестнадцатеричными символами (0-9, A-F). Это не является обязательным. Трёхзначная нотация (#RGB) является более короткой версией шестизначной формы (#RRGGBB). Например, #f09 имеет тот же цвет, что и #ff0099. Кроме того, четырёхзначная нотация RGB (#RGB) является более короткой версией восьмизначной формы (#RRGGBBAA). Например, #0f38 имеет тот же цвет, что и #00ff3388.Функциональная нотация: rgb(R, G, B[, A]) или rgba(R, G, B, A)
- R (красный), G (зелёный) и B (синий) могут быть либо {{cssxref("<number>")}}s, либо {{cssxref("<percentage>")}}s, где число 255 соответствует 100%. А (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).Функциональная нотация: rgb(R G B[ A]) or rgba(R G B A)
- CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
-
-
-Пример
-
-RGB варианты синтаксиса
-
-В этом примере показано множество способов создания одного цвета с помощью различных цветовых синтаксисов RGB.
-
-/* Все эти варианты синтаксиса задают один и тот же цвет: полностью непрозрачный ярко-розовый. */
-
-/* Шестнадцатеричный синтаксис */
-#f09
-#F09
-#ff0099
-#FF0099
-
-/* Функциональный синтаксис */
-rgb(255,0,153)
-rgb(255, 0, 153)
-rgb(255, 0, 153.0)
-rgb(100%,0%,60%)
-rgb(100%, 0%, 60%)
-rgb(100%, 0, 60%) /* Ошибка! Не смешивайте цифры и проценты. */
-rgb(255 0 153)
-
-/* Шестнадцатеричный синтаксис с Альфа-значением */
-#f09f
-#F09F
-#ff0099ff
-#FF0099FF
-
-/* Функциональный синтаксис с Альфа-значением */
-rgb(255, 0, 153, 1)
-rgb(255, 0, 153, 100%)
-
-/* Синтаксис пробелов */
-rgb(255 0 153 / 1)
-rgb(255 0 153 / 100%)
-
-/* Функциональный синтаксис со значением floats */
-rgb(255, 0, 153.6, 1)
-rgb(1e2, .5e1, .5e0, +.25e2%)
-
-
-RGB вариации прозрачности
-
-/* Шестнадцатеричный синтаксис */
-#3a30 /* 0% непрозрачный зелёный цвет */
-#3A3F /* полный непрозрачный зелёный цвет */
-#33aa3300 /* 0% непрозрачный зелёный цвет */
-#33AA3380 /* 50% непрозрачный зелёный цвет */
-
-/* Функциональный синтаксис */
-rgba(51, 170, 51, .1) /* непрозрачный зелёный цвет на 10% */
-rgba(51, 170, 51, .4) /* непрозрачный зелёный цвет на */
-rgba(51, 170, 51, .7) /* непрозрачный зелёный цвет на 70% */
-rgba(51, 170, 51, 1) /* полный непрозрачный зелёный цвет */
-
-/* Синтаксис пробелов */
-rgba(51 170 51 / 0.4) /* непрозрачный зелёный цвет на 40%*/
-rgba(51 170 51 / 40%) /* непрозрачный зелёный цвет на 40% */
-
- /* Функциональный синтаксис со значением floats */
-rgba(255, 0, 153.6, 1)
-rgba(1e2, .5e1, .5e0, +.25e2%)
-
-
-Цвет HSL
-
-Цветовая модель HSL определяет заданный цвет в соответствии с его компонентами оттенка, насыщенности и яркости. Дополнительный Альфа-компонент представляет прозрачность цвета.
-
-Многие дизайнеры считают HSL более интуитивным, чем RGB, поскольку он позволяет независимо регулировать оттенок, насыщенность и лёгкость. HSL также может упростить создание набора подходящих цветов (например, когда вы хотите несколько оттенков одного оттенка).
-
-Синтаксис
-
-Цвета HSL выражаются через функциональные обозначения hsl() и hsla().
-
-
-
Примечание : Начиная с уровня цветов CSS 4, hsla() является псевдонимом для hsl(). В браузерах, реализующих стандарт уровня 4, они принимают одни и те же параметры и ведут себя одинаково.
-
- Функциональная нотация: hsl(H, S, L[, A]) илиhsla(H, S, L, A)
- H (hue) - это {{cssxref("<угол>")}} цветового круга, заданного в degS, rads, градусах или поворотах {{SpecName("CSS4 Colors","#The-HSL-notation")}}. При записи в виде unitless {{cssxref ("<number>")}} он интерпретируется как Градусы, как указано в {{SpecName ("CSS3 Colors","#hsl-color")}}. По определению, red=0 deg=360 град, с другими цветами, распространёнными по кругу, поэтому green=120deg град, blue=240deg град и т. д. В качестве < угла > он неявно обёртывается таким образом, что -120deg=240deg, 480deg=120deg, -1turn=1turn, и т. д.
- S (насыщенность) и L (лёгкость) являются процентами. 100% насыщенность полностью насыщена, в то время как 0% полностью ненасыщен (серый). 100% лёгкость белый, 0% лёгкость чёрный, и 50% лёгкость “нормально.”
- A (alpha) can be a {{cssxref("<number>")}} between 0 and 1, or a {{cssxref("<percentage>")}}, where the number 1 corresponds to 100% (full opacity). A (Альфа) может быть {{cssxref("<number>")}} между 0 и 1 или {{cssxref("<percentage>")}}, где число 1 соответствует 100% (полная непрозрачность).
Функциональная нотация: hsl(H S L[ A]) or hsla(H S L A)
- CSS Colors Level 4 добавляет поддержку разделённых пробелами значений в функциональной нотации.
-
-
-Examples
-
-HSL варианты синтаксиса
-
-/* Все эти примеры указывают один и тот же цвет: лаванда. */
-hsl(270,60%,70%)
-hsl(270, 60%, 70%)
-hsl(270 60% 70%)
-hsl(270deg, 60%, 70%)
-hsl(4.71239rad, 60%, 70%)
-hsl(.75turn, 60%, 70%)
-
-/* Все эти примеры указывают один и тот же цвет: лаванда, которая на 15% непрозрачна. */
-hsl(270, 60%, 50%, .15)
-hsl(270, 60%, 50%, 15%)
-hsl(270 60% 50% / .15)
-hsl(270 60% 50% / 15%)
-
-
-Полностью насыщенные цвета
-
-
-
-
- Нотация
- Описание:
- Итог
-
-
-
-
- hsl(0, 100%, 50%)red
-
-
- hsl(30, 100%, 50%)orange
-
-
- hsl(60, 100%, 50%)yellow
-
-
- hsl(90, 100%, 50%)lime green
-
-
- hsl(120, 100%, 50%)green
-
-
- hsl(150, 100%, 50%)blue-green
-
-
- hsl(180, 100%, 50%)cyan
-
-
- hsl(210, 100%, 50%)sky blue
-
-
- hsl(240, 100%, 50%)blue
-
-
- hsl(270, 100%, 50%)purple
-
-
- hsl(300, 100%, 50%)magenta
-
-
- hsl(330, 100%, 50%)pink
-
-
- hsl(360, 100%, 50%)red
-
-
-
-
-Более светлая и более тёмная зелень
-
-
-
-
- Нотация
- Описание:
- Итог
-
-
-
-
- hsl(120, 100%, 0%)black
-
-
- hsl(120, 100%, 20%)
-
- hsl(120, 100%, 40%)
-
- hsl(120, 100%, 60%)
-
- hsl(120, 100%, 80%)
-
- hsl(120, 100%, 100%)white
-
-
-
-
-Насыщенная и ненасыщенная зелень
-
-
-
-
- Нотация
- Описание:
- Итог
-
-
-
-
- hsl(120, 100%, 50%)green
-
-
- hsl(120, 80%, 50%)
-
- hsl(120, 60%, 50%)
-
- hsl(120, 40%, 50%)
-
- hsl(120, 20%, 50%)
-
- hsl(120, 0%, 50%)gray
-
-
-
-
-Вариации прозрачности HSL
-
-hsla(240, 100%, 50%, .05) /* непрозрачный синий на 5% */
-hsla(240, 100%, 50%, .4) /* непрозрачный синий на 40% */
-hsla(240, 100%, 50%, .7) /* непрозрачный синий на 70% */
-hsla(240, 100%, 50%, 1) /* полный непрозрачный синий */
-
-/* Синтаксис пробелов */
-hsla(240 100% 50% / .05) /* непрозрачный синий на 5% */
-
-/* Процентное значение для Альфа */
-hsla(240 100% 50% / 5%) /* непрозрачный синий на 5% */
-
-
-Системный цвет
-
-Не все системные цвета поддерживаются на всех системах. {{deprecated_inline}} для использования на общедоступных веб-страницах.
-
-
- ActiveBorder
- Активная граница окна.
- ActiveCaption
- Активный заголовок окна. Должен использоваться с текстом CaptionText в качестве цвета переднего плана.
- AppWorkspace
- Цвет фона интерфейса нескольких документов.
- Background
- Фон рабочего стола.
- ButtonFace
- Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за одного слоя окружающей границы. Следует использовать с текстом ButtonText цвет переднего плана.
- ButtonHighlight
- Цвет границы, обращённой к источнику света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы.
- ButtonShadow
- Цвет границы вдали от источника света для 3-D элементов, которые появляются 3-D из-за этого слоя окружающей границы. Цвет границы находится вдали от источника света для трёхмерных элементов, которые появляются 3-D из-за этого слоя, окружающего границу.
- ButtonText
- Следует использовать с ButtonFace или ThreeDFace цвет фона.
- CaptionText
- Текст в заголовке, поле размера и поле со стрелкой прокрутки. Следует использовать с цветом фона ActiveCaption.
- GrayText
- Серый (отключён) текст.
- Highlight
- Элемент(ы), выбранный в элементе управления. Следует использовать с HighlightText текста цветом переднего плана.
- HighlightText
- Текст элемента(ов), выбранного в элементе управления. Следует использовать с подсветкой цвета фона.
- InactiveBorder
- Граница неактивного окна.
- InactiveCaption
- Заголовок неактивного окна. Должен использоваться с цветом переднего плана InactiveCaptionText.
- InactiveCaptionText
- Следует использовать с InactiveCaption неактивным цветом фона заголовка.
- InfoBackground
- Цвет фона для элементов управления всплывающей подсказки. Должен использоваться с цветом переднего плана InfoText.
- InfoText
- Цвет текста элементов подсказки. Должен использоваться с иInfoBackgroundфона.
- Menu
- Фон меню. Должен использоваться с MenuText или-moz-MenuBarTextстроки меню цвет переднего плана.
- MenuText
- Текст в меню. Следует использовать с меню Цвет фона.
- Scrollbar
- Цвет фона полос прокрутки.
- ThreeDDarkShadow
- Цвет более тёмной (как правило, внешней) из двух границ от источника света для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
- ThreeDFace
- Should be used with the ButtonText foreground color. Цвет фона лица для трёхмерных элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы. Следует использовать с текстом кнопки цвет переднего плана.
- ThreeDHighlight
- Цвет более светлого (обычно внешнего) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
- ThreeDLightShadow
- Цвет более тёмной (обычно внутренней) из двух границ, обращённых к источнику света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
- ThreeDShadow
- Цвет более светлого (как правило, внутреннего) из двух границ от источника света для 3-D элементов, которые появляются 3-D из-за двух концентрических слоёв окружающей границы.
- Window
- Фон окна. Следует использовать с WindowText цвет переднего плана.
- WindowFrame
- Оконная рама
- WindowText
- Текст в windows. Следует использовать с цветом фона окна.
-
-
-Расширенные Цвета Системы Mozilla
-
-
- -moz-ButtonDefault
- Цвет границы вокруг кнопки, которые обозначают действие по умолчанию для диалогового окна.
- -moz-ButtonHoverFace
- Цвет фона кнопки, на которую наведён указатель мыши (который будет Трёхлинейным или лицом кнопки, когда указатель мыши не находится над ним). Следует использовать с-moz-кнопка наведения текста цвет переднего плана.
- -moz-ButtonHoverText
- Цвет текста кнопки, на которую наведён указатель мыши (который будет ButtonText, когда указатель мыши не находится над ним). Следует использовать с--moz-ButtonHoverFace background color.
- -moz-CellHighlight
- Цвет фона для выбранного элемента в виджете дерево. Следует использовать с цветом переднего плана -moz-CellHighlightText. Смотрите также-moz-html-CellHighlight.
- -moz-CellHighlightText
- Цвет текста для выбранного элемента в дереве. Следует использовать с цветом фона moz-CellHighlight background. Смотрите также -moz-html-CellHighlightText выделения ячейки.
- -moz-Combobox
- {{Gecko_minversion_inline ("1.9.2")}} цвет фона для комбинированных полей -moz-ComboboxText. Должен использоваться с цветом переднего плана текста-moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-Field.
- -moz-ComboboxText
- {Gecko_minversion_inline ("1.9.2")}} цвет текста для комбинированных полей. Следует использовать с цветом фона -moz-Combobox. В версиях до 1.9.2 вместо этого используйте -moz-FieldText.
- -moz-Dialog
- Цвет фона для диалоговых окон. Должен использоваться с цветом переднего плана --moz-DialogText.
- -moz-DialogText
- Цвет текста для диалоговых окон. Должен использоваться с цветом фона -moz-Dialog.
- -moz-dragtargetzone
- -moz-EvenTreeRow
- {{gecko_minversion_inline("1.9")}} цвет фона для чётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте-moz-поле. Смотрите также -moz-OddTreeRow.
- -moz-Field
- Text field background color. Should be used with the -moz-FieldText foreground color. Цвет фона текстового поля. Должен использоваться с цветом переднего плана-moz-FieldText.
- -moz-FieldText
- Text field text color. Should be used with the -moz-Field, -moz-EvenTreeRow, or -moz-OddTreeRow background color. Текстовое поле цвет текста. Следует использовать с -moz-Field, -moz-EvenTreeRow или -moz-OddTreeRow цветом фона строки дерева.
- -moz-html-CellHighlight
- {{gecko_minversion_inline("1.9")}} Background color for highlighted item in HTML {{HTMLElement("select")}}s. Should be used with the -moz-html-CellHighlightText foreground color. Prior to Gecko 1.9, use -moz-CellHighlight. {{gecko_minversion_inline ("1.9")}} цвет фона для выделенного элемента в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом переднего плана -moz-html-CellHighlight. До Gecko 1.9, используйте -moz-CellHighlightText.
- -moz-html-CellHighlightText
- {{gecko_minversion_inline ("1.9")}} цвет текста для -moz-html-CellHighlight выделенных элементов в HTML {{HTMLElement ("select")}} s. должен использоваться с цветом фона. До Gecko 1.9, используйте moz-html-CellHighlight.
- -moz-mac-accentdarkestshadow
- -moz-mac-accentdarkshadow
- -moz-mac-accentface
- -moz-mac-accentlightesthighlight
- -moz-mac-accentlightshadow
- -moz-mac-accentregularhighlight
- -moz-mac-accentregularshadow
- -moz-mac-chrome-active
- {{Gecko_minversion_inline("1.9.1")}}
- -moz-mac-chrome-inactive
- {{Gecko_minversion_inline("1.9.1")}}
- -moz-mac-focusring
- -moz-mac-menuselect
- -moz-mac-menushadow
- -moz-mac-menutextselect
- -moz-MenuHover
- Цвет фона для зависших пунктов меню. Часто похожи на Highlight. Следует использовать с moz-MenuHoverText или -moz-MenuBarHoverText при наведении цвет текста переднего плана.
- -moz-MenuHoverText
- Text color for hovered menu items. Often similar to HighlightText. Should be used with the -moz-MenuHover background color. Цвет текста для зависших пунктов меню. Часто похоже на выделение текста HighlightText. Следует использовать с -moz-MenuHover наведите цвет фона.
- -moz-MenuBarText
- {{Gecko_minversion_inline ("1.9.2")}} цвет текста в строках меню. Часто похоже на текст меню "MenuText". Должен использоваться поверх фона Menu.
- -moz-MenuBarHoverText
- Цвет для зависшего текста в строках меню. Часто похоже на -moz-MenuHoverTextменю наведения текста. Следует использовать поверх -moz-MenuHover наведите фон.
- -moz-nativehyperlinktext
- {{Gecko_minversion_inline ("1.9.1")}} цвет гиперссылки платформы по умолчанию.
- -moz-OddTreeRow
- {{gecko_minversion_inline("1.9")}} цвет фона для нечётных строк в дереве. Должен использоваться с цветом переднего плана -moz-FieldText. В версиях Gecko до 1.9, используйте -moz-Field. Смотрите также -moz-EvenTreeRow.
- -moz-win-communicationstext
- {{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-communications-toolbox;.
- -moz-win-mediatext
- {{gecko_minversion_inline ("1.9")}} следует использовать для текста в объектах с {{cssxref ("- moz-appearance")}}:- moz-win-media-toolbox.
- -moz-win-accentcolor
- {{gecko_minversion_inline ("56")}}
- -moz-win-accentcolortext
- {{gecko_minversion_inline ("56")}}
-
-
-Расширения Цветовых Предпочтений Mozilla
-
-
- -moz-activehyperlinktext
- Пользовательское предпочтение цвета текста активных ссылок. Должен использоваться с цветом фона документа по умолчанию.
- -moz-default-background-color
- {{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета фона документа.
- -moz-default-color
- {{Gecko_minversion_inline ("5.0")}} предпочтения пользователя для цвета текста.
- -moz-hyperlinktext
- Предпочтения пользователя для цвета текста непрошеных ссылок. Должен использоваться с цветом фона документа по умолчанию.
- -moz-visitedhyperlinktext
- Предпочтения пользователя для цвета текста посещённых ссылок. Должен использоваться с цветом фона документа по умолчанию.
-
-
-Интерполяция
-
-В анимации и градиентах значения <color> интерполируются на каждый из их красных, зелёных и синих компонентов . Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется функцией времени .
-
-Соображения доступности
-
-Некоторые люди с трудом различают цвета. Рекомендация WCAG 2.0 настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В разделе цвет и цветовой контраст .
-
-Технические характеристики
-
-
-
-
- Спецификация
- Статус
- Пояснения
-
-
-
-
- {{SpecName('CSS4 Colors', '#colorunits', '<color>')}}
- {{Spec2('CSS4 Colors')}}
- Добавляет rebeccapurple, четырёхзначные (#RGBA) и восьмизначные (#RRGGBBAA) шестнадцатеричные обозначения, rgba() и hsla() в качестве псевдонимов rgb () и hsl () (оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах hsl ().
-
-
- {{SpecName('CSS3 Colors', '#colorunits', '<color>')}}
- {{Spec2('CSS3 Colors')}}
- Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения rgb(), hsl () и hsla().
-
-
- {{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}}
- {{Spec2('CSS2.1')}}
- Добавляет orange keyword(ключевое слово) и системные цвета.
-
-
- {{SpecName('CSS1', '#color-units', '<color>')}}
- {{Spec2('CSS1')}}
- Первоначальное определение. Включает в себя 16 основных ключевых слов цвета.
-
-
-
-
-Совместимость браузера
-{{Compat}}
-
-Смотреть также
-
-
- Свойство {{Cssxref("непрозрачность")}} позволяет определить прозрачность на уровне элемента.
- Некоторые общие свойства, которые используют этот тип данных: {{Cssxref("цвет")}}, {{Cssxref("фон")}}, {{Cssxref("бордюр-колор")}}, {{Cssxref("окно-тень")}}, {{Cssxref("контур-цвет")}}, {{Cssxref("текст-тень")}}
- Применение цвета к элементам HTML с помощью CSS
diff --git a/files/ru/web/css/color_value/index.md b/files/ru/web/css/color_value/index.md
new file mode 100644
index 00000000000000..893391d47becab
--- /dev/null
+++ b/files/ru/web/css/color_value/index.md
@@ -0,0 +1,1349 @@
+---
+title:
+slug: Web/CSS/color_value
+translation_of: Web/CSS/color_value
+---
+{{CSSRef}}
+
+Тип **``** [CSS](/ru/docs/Web/CSS) [data type](/ru/docs/Web/CSS/CSS_Types) предоставляет цвет в цветовом спектре [sRGB](https://en.wikipedia.org/wiki/SRGB). В `` может включать значения прозрачности Альфа-канала ([alpha-channel](https://en.wikipedia.org/wiki/Alpha_compositing)), указывающие, как цвет [сочетается](https://www.w3.org/TR/2003/REC-SVG11-20030114/masking.html#SimpleAlphaBlending) с его фоном.
+
+В `` может быть определена любым из следующих способов can.
+
+- Использование или подключённого свойства ведённого в параметр (например, `blue` или `transparent`)
+- Использование [кубической системы координат RGB](https://en.wikipedia.org/wiki/RGB_color_model#Geometric_representation) (via the #-hexadecimal or the `rgb()` and `rgba()` functional notations)
+- Использование [цилиндрической системы координат HSL](https://en.wikipedia.org/wiki/HSL_and_HSV) (через функциональные обозначения `hsl()` и `hsla()`)
+
+> **Примечание:**В этой статье подробно описывается тип данных \. Дополнительные сведения об использовании цвета в HTML см. В разделе применение цвета к [элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color).
+
+## Синтаксис
+
+Для типа данных задаётся `` с помощью одного из следующих параметров.
+
+> **Примечание:** значения `` точно определены, их фактический внешний вид может отличаться (иногда значительно) от устройства к устройству. Это связано с тем что большинство устройств не откалиброваны, а некоторые браузеры не поддерживают цветовые профили [устройств вывода](https://en.wikipedia.org/wiki/ICC_profile).
+
+### Ключевые цвета
+
+Ключевые слова для цвета - это идентификаторы без учёта регистра, представляющие определённый цвет, например `red`, `blue`, `black` или `lightseagreen`. Хотя названия более или менее описывают их соответствующие цвета, они по существу искусственны, без строгого обоснования используемых имён.
+
+Есть несколько предостережений, которые следует учитывать при использовании ключевых слов цвета:
+
+- [HTML](/ru/docs/Web/HTML) распознает только 16 основных цветовых ключевых слов, найденных в CSS1, используя определённый алгоритм для преобразования нераспознанных значений (часто в совершенно разные цвета). Другие ключевые слова цвета должны использоваться только в CSS и [SVG](/ru/docs/Web/SVG).
+- В отличие от HTML, CSS будет полностью игнорировать неизвестные ключевые слова.
+- Ключевые слова цвета все представляют собой простые, сплошные цвета, без прозрачности.
+- Несколько ключевых слов являются псевдонимами друг для друга:
+
+ - `aqua` / `cyan`
+ - `fuchsia` / `magenta`
+ - `darkgray` / `darkgrey`
+ - `darkslategray` / `darkslategrey`
+ - `dimgray` / `dimgrey`
+ - `lightgray` / `lightgrey`
+ - `lightslategray` / `lightslategrey`
+ - `gray` / `grey`
+ - `slategray` / `slategrey`
+
+- Хотя многие ключевые слова были адаптированы из [X11](https://en.wikipedia.org/wiki/X_Window_System), их значения RGB могут отличаться от соответствующего цвета в системах X11, поскольку производители иногда адаптируют цвета X11 к своему конкретному оборудованию.
+
+> **Примечание:** **Примечание:** Список принятых ключевых слов претерпел много изменений в ходе эволюции CSS:\* CSS Level 1 включал только 16 основных цветов, называемых цветами [VGA](https://en.wikipedia.org/wiki/VGA), поскольку они были взяты из набора отображаемых цветов на видеокартах VGA
+>
+> - CSS Level 2 добавил ключевое слово `orange`.
+> - Хотя различные цвета не в спецификации (в основном адаптированные из списка цветов X11) поддерживались ранними браузерами, они не были формально определены до уровня SVG 1.0 и CSS Colors 3. Они называются расширенными цветовыми _ключевыми_ словами, _цветами X11_ или цветами SVG.
+> - CSS Colors Level 4 добавил ключевое слово rebeccapurple, [чтобы почтить пионера веб-Эрика Мейера.](https://codepen.io/trezy/post/honoring-a-great-man)
+
+
+
+
+ Спецификация
+ Эквивалент RGB
+ Ключевое слово
+ RGB hex значение
+ Видео сайта
+
+
+
+
+ {{SpecName("CSS1")}}
+ black#000000
+
+ silver#c0c0c0
+
+ gray#808080
+
+ white#ffffff
+
+ maroon#800000
+
+ red#ff0000
+
+ purple#800080
+
+ fuchsia#ff00ff
+
+ green#008000
+
+ lime#00ff00
+
+ olive#808000
+
+ yellow#ffff00
+
+ navy#000080
+
+ blue#0000ff
+
+ teal#008080
+
+ aqua#00ffff
+
+ {{SpecName("CSS2.1")}}
+ orange#ffa500
+
+ {{SpecName("CSS3 Colors")}}
+ aliceblue#f0f8ff
+
+ antiquewhite#faebd7
+
+ aquamarine#7fffd4
+
+ azure#f0ffff
+
+ beige#f5f5dc
+
+ bisque#ffe4c4
+
+ blanchedalmond#ffebcd
+
+ blueviolet#8a2be2
+
+ brown#a52a2a
+
+ burlywood#deb887
+
+ cadetblue#5f9ea0
+
+ chartreuse#7fff00
+
+ chocolate#d2691e
+
+ coral#ff7f50
+
+ cornflowerblue#6495ed
+
+ cornsilk#fff8dc
+
+ crimson#dc143c
+
+
+ cyanaqua)
+
+ #00ffff
+
+ darkblue#00008b
+
+ darkcyan#008b8b
+
+ darkgoldenrod#b8860b
+
+ darkgray#a9a9a9
+
+ darkgreen#006400
+
+ darkgrey#a9a9a9
+
+ darkkhaki#bdb76b
+
+ darkmagenta#8b008b
+
+ darkolivegreen#556b2f
+
+ darkorange#ff8c00
+
+ darkorchid#9932cc
+
+ darkred#8b0000
+
+ darksalmon#e9967a
+
+ darkseagreen#8fbc8f
+
+ darkslateblue#483d8b
+
+ darkslategray#2f4f4f
+
+ darkslategrey#2f4f4f
+
+ darkturquoise#00ced1
+
+ darkviolet#9400d3
+
+ deeppink#ff1493
+
+ deepskyblue#00bfff
+
+ dimgray#696969
+
+ dimgrey#696969
+
+ dodgerblue#1e90ff
+
+ firebrick#b22222
+
+ floralwhite#fffaf0
+
+ forestgreen#228b22
+
+ gainsboro#dcdcdc
+
+ ghostwhite#f8f8ff
+
+ gold#ffd700
+
+ goldenrod#daa520
+
+ greenyellow#adff2f
+
+ grey#808080
+
+ honeydew#f0fff0
+
+ hotpink#ff69b4
+
+ indianred#cd5c5c
+
+ indigo#4b0082
+
+ ivory#fffff0
+
+ khaki#f0e68c
+
+ lavender#e6e6fa
+
+ lavenderblush#fff0f5
+
+ lawngreen#7cfc00
+
+ lemonchiffon#fffacd
+
+ lightblue#add8e6
+
+ lightcoral#f08080
+
+ lightcyan#e0ffff
+
+ lightgoldenrodyellow#fafad2
+
+ lightgray#d3d3d3
+
+ lightgreen#90ee90
+
+ lightgrey#d3d3d3
+
+ lightpink#ffb6c1
+
+ lightsalmon#ffa07a
+
+ lightseagreen#20b2aa
+
+ lightskyblue#87cefa
+
+ lightslategray#778899
+
+ lightslategrey#778899
+
+ lightsteelblue#b0c4de
+
+ lightyellow#ffffe0
+
+ limegreen#32cd32
+
+ linen#faf0e6
+
+
+ magentafuchsia)
+
+ #ff00ff
+
+ mediumaquamarine#66cdaa
+
+ mediumblue#0000cd
+
+ mediumorchid#ba55d3
+
+ mediumpurple#9370db
+
+ mediumseagreen#3cb371
+
+ mediumslateblue#7b68ee
+
+ mediumspringgreen#00fa9a
+
+ mediumturquoise#48d1cc
+
+ mediumvioletred#c71585
+
+ midnightblue#191970
+
+ mintcream#f5fffa
+
+ mistyrose#ffe4e1
+
+ moccasin#ffe4b5
+
+ navajowhite#ffdead
+
+ oldlace#fdf5e6
+
+ olivedrab#6b8e23
+
+ orangered#ff4500
+
+ orchid#da70d6
+
+ palegoldenrod#eee8aa
+
+ palegreen#98fb98
+
+ paleturquoise#afeeee
+
+ palevioletred#db7093
+
+ papayawhip#ffefd5
+
+ peachpuff#ffdab9
+
+ peru#cd853f
+
+ pink#ffc0cb
+
+ plum#dda0dd
+
+ powderblue#b0e0e6
+
+ rosybrown#bc8f8f
+
+ royalblue#4169e1
+
+ saddlebrown#8b4513
+
+ salmon#fa8072
+
+ sandybrown#f4a460
+
+ seagreen#2e8b57
+
+ seashell#fff5ee
+
+ sienna#a0522d
+
+ skyblue#87ceeb
+
+ slateblue#6a5acd
+
+ slategray#708090
+
+ slategrey#708090
+
+ snow#fffafa
+
+ springgreen#00ff7f
+
+ steelblue#4682b4
+
+ tan#d2b48c
+
+ thistle#d8bfd8
+
+ tomato#ff6347
+
+ turquoise#40e0d0
+
+ violet#ee82ee
+
+ wheat#f5deb3
+
+ whitesmoke#f5f5f5
+
+ yellowgreen#9acd32
+
+ {{SpecName("CSS4 Colors")}}
+
+ rebeccapurple
+ #663399
+
+
+
+### [`Прозрачное`]() ключевое слово
+
+Ключевое слово `transparent` представляет собой полностью прозрачный цвет. Это делает фон позади цветного элемента полностью видимым. Технически `transparent `- это ярлык для `rgba (0,0,0,0)`.
+
+> **Примечание:** **Примечание по совместимости:** чтобы предотвратить непредвиденное поведение, например, в {{cssxref ("градиент")}}, текущая спецификация CSS утверждает, что `transparent` должен быть вычислен в [Альфа-предварительно умноженном цветовом пространстве](https://www.w3.org/TR/2012/CR-css3-images-20120417/#color-stop-syntax). Однако имейте в виду, что старые браузеры могут рассматривать его как чёрный с Альфа-значением `0`.
+
+> **Примечание:** **Историческая запись:** `transparent` не был истинным цветом на уровне CSS 2 (Редакция 1). Это было специальное ключевое слово, которое можно было использовать вместо обычного значения `` для двух свойств CSS: {{Cssxref("background")}} и {{Cssxref("border")}}. Он был существенно добавлен, чтобы позволить разработчикам переопределить унаследованный сплошной цвет. С появлением Альфа-каналов в CSS Colors Level 3, `transparent `был переопределён как истинный цвет. Теперь его можно использовать везде, где можно использовать значение ``.
+
+### [`currentColor`]() ключевое слово
+
+Ключевое слово `currentColor` представляет значение свойства элемента {{Cssxref("color")}}. Это позволяет использовать значение `color` для свойств, которые не получают его по умолчанию.
+
+Если текущий цвет используется в качестве значения свойства `color` , он вместо этого принимает его значение из наследуемого значения свойства `color`.
+
+#### currentColor пример
+
+```html
+
+ Цвет текста-синий.
+
+ This block is surrounded by a blue border.
+
` интерполируются на каждый из их [красных, зелёных и синих компонентов](https://www.gimp.org/docs/plug-in/appendix-alpha.html). Каждый компонент интерполируется как реальное число с плавающей запятой. Обратите внимание, что интерполяция цветов происходит в Альфа-предварительно умноженном цветовом пространстве rgba, чтобы предотвратить появление неожиданных серых цветов. В анимации, скорость интерполяции определяется [функцией времени](/ru/docs/Web/CSS/single-transition-timing-function).
+
+## Соображения доступности
+
+Некоторые люди с трудом различают цвета. Рекомендация [WCAG 2.0](https://www.w3.org/TR/WCAG/#visual-audio-contrast) настоятельно рекомендует не использовать цвет в качестве единственного средства передачи определённого сообщения, действия или результата. Дополнительную информацию см. В [разделе цвет и цветовой контраст](/ru/docs/Learn/Accessibility/CSS_and_JavaScript#Color_and_color_contrast).
+
+## Технические характеристики
+
+| Спецификация | Статус | Пояснения |
+| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| {{SpecName('CSS4 Colors', '#colorunits', '<color>')}} | {{Spec2('CSS4 Colors')}} | Добавляет `rebeccapurple`, четырёхзначные (`#RGBA`) и восьмизначные (`#RRGGBBAA`) шестнадцатеричные обозначения, `rgba() `и `hsla()` в качестве псевдонимов `rgb ()` и `hsl () `(оба с одинаковым синтаксисом параметров), разделённые пробелами параметры функции в качестве альтернативы запятым, проценты для Альфа-значений и углы для компонента оттенка в цветах `hsl ()`. |
+| {{SpecName('CSS3 Colors', '#colorunits', '<color>')}} | {{Spec2('CSS3 Colors')}} | Устаревает системные цвета. Добавляет цвета SVG и функциональные обозначения `rgb()`, `hsl ()` и `hsla()`. |
+| {{SpecName('CSS2.1', 'syndata.html#value-def-color', '<color>')}} | {{Spec2('CSS2.1')}} | Добавляет `orange` keyword(ключевое слово) и системные цвета. |
+| {{SpecName('CSS1', '#color-units', '<color>')}} | {{Spec2('CSS1')}} | Первоначальное определение. Включает в себя 16 основных ключевых слов цвета. |
+
+## Совместимость браузера
+
+{{Compat}}
+
+## Смотреть также
+
+- Свойство {{Cssxref("непрозрачность")}} позволяет определить прозрачность на уровне элемента.
+- Некоторые общие свойства, которые используют этот тип данных: {{Cssxref("цвет")}}, {{Cssxref("фон")}}, {{Cssxref("бордюр-колор")}}, {{Cssxref("окно-тень")}}, {{Cssxref("контур-цвет")}}, {{Cssxref("текст-тень")}}
+- [Применение цвета к элементам HTML с помощью CSS](/ru/docs/Web/HTML/Applying_color)
diff --git a/files/ru/web/css/column-count/index.html b/files/ru/web/css/column-count/index.html
deleted file mode 100644
index 4bd62296988c3b..00000000000000
--- a/files/ru/web/css/column-count/index.html
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: column-count
-slug: Web/CSS/column-count
-tags:
- - Свойство
- - мультиколоночная вёрстка
-translation_of: Web/CSS/column-count
----
-{{CSSRef}}
-
-CSS свойство column-count
-
-{{EmbedInteractiveExample("pages/css/column-count.html")}}
-
-
-
-Синтаксис
-
-/* Значение, заданное ключевым словом */
-column-count: auto;
-
-/* целое значение */
-column-count: 3;
-
-/* глобальные значения */
-column-count: inherit;
-column-count: initial;
-column-count: unset;
-
-Значения
-
-
- autoКоличество столбцов определяется другими свойствами CSS, такими как {{cssxref("column-width")}}.
- {{cssxref("<integer>")}}
- Является строго положительным {{cssxref("<integer>")}}, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента. Если {{cssxref("column-width")}}. также, не установлено в значение -auto, оно указывает максимально допустимое число столбцов.
-
-
-
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<p class="content-box">
- This is a bunch of text split into three columns
- using the CSS `column-count` property. The text
- is equally distributed over the columns.
-</p>
-
-
-CSS
-
-.content-box {
- column-count: 3;
-}
-
-
-Result
-
-{{EmbedLiveSample('Пример', 'auto', 120)}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/column-count/index.md b/files/ru/web/css/column-count/index.md
new file mode 100644
index 00000000000000..36eccca966bc62
--- /dev/null
+++ b/files/ru/web/css/column-count/index.md
@@ -0,0 +1,78 @@
+---
+title: column-count
+slug: Web/CSS/column-count
+tags:
+ - Свойство
+ - мультиколоночная вёрстка
+translation_of: Web/CSS/column-count
+---
+{{CSSRef}}
+
+[CSS ](/ru/docs/Web/CSS)свойство **`column-count`** разбивает содержимое элемента на заданное число столбцов.
+
+{{EmbedInteractiveExample("pages/css/column-count.html")}}
+
+## Синтаксис
+
+```css
+/* Значение, заданное ключевым словом */
+column-count: auto;
+
+/* целое значение */
+column-count: 3;
+
+/* глобальные значения */
+column-count: inherit;
+column-count: initial;
+column-count: unset;
+```
+
+### Значения
+
+- `auto`
+ - : Количество столбцов определяется другими свойствами CSS, такими как {{cssxref("column-width")}}.
+- {{cssxref("<integer>")}}
+ - : Является строго положительным {{cssxref("<integer>")}}, описывающим идеальное число столбцов, в которые будет стекаться содержимое элемента. Если {{cssxref("column-width")}}. также, не установлено в значение -`auto`, оно указывает максимально допустимое число столбцов.
+
+### Formal syntax
+
+{{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+
+ This is a bunch of text split into three columns
+ using the CSS `column-count` property. The text
+ is equally distributed over the columns.
+
+```
+
+### CSS
+
+```css
+.content-box {
+ column-count: 3;
+}
+```
+
+### Result
+
+{{EmbedLiveSample('Пример', 'auto', 120)}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- [Multiple-column Layout](/ru/docs/Learn/CSS/CSS_layout/Multiple-column_Layout) (Learn Layout)
+- [Basic Concepts of Multicol](/ru/docs/Web/CSS/CSS_Columns/Basic_Concepts_of_Multicol)
diff --git a/files/ru/web/css/column-fill/index.html b/files/ru/web/css/column-fill/index.html
deleted file mode 100644
index 22b5d3435aacef..00000000000000
--- a/files/ru/web/css/column-fill/index.html
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: column-fill
-slug: Web/CSS/column-fill
-translation_of: Web/CSS/column-fill
----
-{{CSSRef("CSS Multi-columns")}}
-
-Свойство column-fill применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства column-fill установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения auto, содержимое занимает столько пространства сколько ему потребуется.
-
-{{cssinfo}}
-
-Синтаксис
-
-column-fill: auto;
-column-fill: balance;
-
-/* Значения по умолчанию */
-column-fill: inherit;
-column-fill: initial;
-column-fill: unset;
-
-
-Значения
-
-
- autoВысота столбцов не контролируется.
- balanceРазделяет содержимое на равные по высоте столбцы.
-
-
-Возможные значения
-
-{{csssyntax}}
-
-Примеры
-
-.content-box {
- column-count: 4;
- column-rule: 1px solid black;
- column-fill: balance;
- height: 200px;
-}
-
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-{{Compat}}
diff --git a/files/ru/web/css/column-fill/index.md b/files/ru/web/css/column-fill/index.md
new file mode 100644
index 00000000000000..60f6dd4db3e32c
--- /dev/null
+++ b/files/ru/web/css/column-fill/index.md
@@ -0,0 +1,52 @@
+---
+title: column-fill
+slug: Web/CSS/column-fill
+translation_of: Web/CSS/column-fill
+---
+{{CSSRef("CSS Multi-columns")}}
+
+Свойство `column-fill `применяется к родительскому элементу, разбитому на столбцы и указывает как содержимое располагается внутри столбца (column). Если значение свойства `column-fill` установлено как balanced, то содержимое во всех столбцах будет иметь одинаковую высоту. В случае использования значения `auto`, содержимое занимает столько пространства сколько ему потребуется.
+
+{{cssinfo}}
+
+## Синтаксис
+
+```css
+column-fill: auto;
+column-fill: balance;
+
+/* Значения по умолчанию */
+column-fill: inherit;
+column-fill: initial;
+column-fill: unset;
+```
+
+### Значения
+
+- `auto`
+ - : Высота столбцов не контролируется.
+- `balance`
+ - : Разделяет содержимое на равные по высоте столбцы.
+
+### Возможные значения
+
+{{csssyntax}}
+
+## Примеры
+
+```css
+.content-box {
+ column-count: 4;
+ column-rule: 1px solid black;
+ column-fill: balance;
+ height: 200px;
+}
+```
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/column-rule-color/index.html b/files/ru/web/css/column-rule-color/index.html
deleted file mode 100644
index 93151d569bf504..00000000000000
--- a/files/ru/web/css/column-rule-color/index.html
+++ /dev/null
@@ -1,83 +0,0 @@
----
-title: column-rule-color
-slug: Web/CSS/column-rule-color
-tags:
- - мультиколоночная вёрстка
-translation_of: Web/CSS/column-rule-color
----
-{{CSSRef}}
-
-CSS свойство column-rule-color устанавливает цвет линии, расположенной между колонками при мультиколоночной вёрстке.
-
-{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
-
-
-
-Синтаксис
-
-/* Значения <color> */
-column-rule-color: red;
-column-rule-color: rgb(192, 56, 78);
-column-rule-color: transparent;
-column-rule-color: hsla(0, 100%, 50%, 0.6);
-
-/* Глобальные значения */
-column-rule-color: inherit;
-column-rule-color: initial;
-column-rule-color: unset;
-
-
-Свойство column-rule-color указывает одиночное значение <color>.
-
-Значения
-
-
- {{cssxref("<color>")}}
- Цвет линий, разделяющих столбцы.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<p>This is a bunch of text split into three columns.
- The `column-rule-color` property is used to change
- the color of the line that is drawn between columns.
- Don't you think that's wonderful?</p>
-
-CSS
-
-p {
- column-count: 3;
- column-rule-style: solid;
- column-rule-color: blue;
-}
-
-
-Результат
-
-{{EmbedLiveSample("Пример")}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
- The {{cssxref("<color>")}} data type
- Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}
- Applying color to HTML elements using CSS
diff --git a/files/ru/web/css/column-rule-color/index.md b/files/ru/web/css/column-rule-color/index.md
new file mode 100644
index 00000000000000..6af8dc072c6828
--- /dev/null
+++ b/files/ru/web/css/column-rule-color/index.md
@@ -0,0 +1,79 @@
+---
+title: column-rule-color
+slug: Web/CSS/column-rule-color
+tags:
+ - мультиколоночная вёрстка
+translation_of: Web/CSS/column-rule-color
+---
+{{CSSRef}}
+
+[CSS ](/ru/docs/Web/CSS)свойство** `column-rule-color`** устанавливает цвет линии, расположенной между колонками при мультиколоночной вёрстке.
+
+{{EmbedInteractiveExample("pages/css/column-rule-color.html")}}
+
+## Синтаксис
+
+```css
+/* Значения */
+column-rule-color: red;
+column-rule-color: rgb(192, 56, 78);
+column-rule-color: transparent;
+column-rule-color: hsla(0, 100%, 50%, 0.6);
+
+/* Глобальные значения */
+column-rule-color: inherit;
+column-rule-color: initial;
+column-rule-color: unset;
+```
+
+Свойство `column-rule-color` указывает одиночное значение ``.
+
+### Значения
+
+- {{cssxref("<color>")}}
+ - : Цвет линий, разделяющих столбцы.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+This is a bunch of text split into three columns.
+ The `column-rule-color` property is used to change
+ the color of the line that is drawn between columns.
+ Don't you think that's wonderful?
+```
+
+### CSS
+
+```css
+p {
+ column-count: 3;
+ column-rule-style: solid;
+ column-rule-color: blue;
+}
+```
+
+### Результат
+
+{{EmbedLiveSample("Пример")}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- The {{cssxref("<color>")}} data type
+- Other color-related properties: {{cssxref("color")}}, {{cssxref("background-color")}}, {{cssxref("border-color")}}, {{cssxref("outline-color")}}, {{cssxref("text-decoration-color")}}, {{cssxref("text-emphasis-color")}}, {{cssxref("text-shadow")}}, and {{cssxref("caret-color")}}
+- [Applying color to HTML elements using CSS](/ru/docs/Web/HTML/Applying_color)
diff --git a/files/ru/web/css/column-rule-style/index.html b/files/ru/web/css/column-rule-style/index.html
deleted file mode 100644
index 3ae33bce6fe63b..00000000000000
--- a/files/ru/web/css/column-rule-style/index.html
+++ /dev/null
@@ -1,79 +0,0 @@
----
-title: column-rule-style
-slug: Web/CSS/column-rule-style
-tags:
- - мультиколоночная вёрстка
-translation_of: Web/CSS/column-rule-style
----
-{{ CSSRef}}
-
-CSS свойство column-rule-style
-
-{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
-
-
-
-Синтаксис
-
-/* <'border-style'> значения */
-column-rule-style: none;
-column-rule-style: hidden;
-column-rule-style: dotted;
-column-rule-style: dashed;
-column-rule-style: solid;
-column-rule-style: double;
-column-rule-style: groove;
-column-rule-style: ridge;
-column-rule-style: inset;
-column-rule-style: outset;
-
-/* глобальные значения */
-column-rule-style: inherit;
-column-rule-style: initial;
-column-rule-style: unset;
-
-
-Свойство column-rule-style указывается как одиночное <'border-style'> значение.
-
-Значения
-
-
- <'border-style'>Ключевое слово, определяющее {{ cssxref("border-style") }}, описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Пример
-
-HTML
-
-<p>This is a bunch of text split into three columns.
- The `column-rule-style` property is used to change
- the style of the line that is drawn between columns.
- Don't you think that's wonderful?</p>
-
-CSS
-
-p {
- column-count: 3;
- column-rule-style: dashed;
-}
-
-Результат
-
-{{ EmbedLiveSample('Пример') }}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
diff --git a/files/ru/web/css/column-rule-style/index.md b/files/ru/web/css/column-rule-style/index.md
new file mode 100644
index 00000000000000..b080ffb4c5c82f
--- /dev/null
+++ b/files/ru/web/css/column-rule-style/index.md
@@ -0,0 +1,78 @@
+---
+title: column-rule-style
+slug: Web/CSS/column-rule-style
+tags:
+ - мультиколоночная вёрстка
+translation_of: Web/CSS/column-rule-style
+---
+{{ CSSRef}}
+
+[CSS](/ru/docs/Web/CSS) свойство **`column-rule-style`** устанавливает стиль линии, расположенной между колонками при мультиколоночной вёрстке.
+
+{{EmbedInteractiveExample("pages/css/column-rule-style.html")}}
+
+## Синтаксис
+
+```css
+/* <'border-style'> значения */
+column-rule-style: none;
+column-rule-style: hidden;
+column-rule-style: dotted;
+column-rule-style: dashed;
+column-rule-style: solid;
+column-rule-style: double;
+column-rule-style: groove;
+column-rule-style: ridge;
+column-rule-style: inset;
+column-rule-style: outset;
+
+/* глобальные значения */
+column-rule-style: inherit;
+column-rule-style: initial;
+column-rule-style: unset;
+```
+
+Свойство `column-rule-style` указывается как одиночное `<'border-style'>` значение.
+
+### Значения
+
+- `<'border-style'>`
+ - : Ключевое слово, определяющее {{ cssxref("border-style") }}, описывающий стиль для линии, разделяющей столбцы. Стилизация должна быть интерпретирована как разрушающая границы модель.
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Пример
+
+### HTML
+
+```html
+This is a bunch of text split into three columns.
+ The `column-rule-style` property is used to change
+ the style of the line that is drawn between columns.
+ Don't you think that's wonderful?
+```
+
+### CSS
+
+```css
+p {
+ column-count: 3;
+ column-rule-style: dashed;
+}
+```
+
+### Результат
+
+{{ EmbedLiveSample('Пример') }}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/column-rule/index.html b/files/ru/web/css/column-rule/index.html
deleted file mode 100644
index a0c7fcd88d6638..00000000000000
--- a/files/ru/web/css/column-rule/index.html
+++ /dev/null
@@ -1,104 +0,0 @@
----
-title: column-rule
-slug: Web/CSS/column-rule
-tags:
- - мультиколоночная вёрстка
-translation_of: Web/CSS/column-rule
----
-{{CSSRef}}
-
-Краткая форма записи CSS свойств column-rule
-
-{{EmbedInteractiveExample("pages/css/column-rule.html")}}
-
-
-
-Эта краткая форма записи задаёт индивидуальные column-rule-* свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.
-
-
-
Примечание: Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
-
Синтаксис
-
-column-rule: dotted;
-column-rule: solid 8px;
-column-rule: solid blue;
-column-rule: thick inset blue;
-
-/* глобальные значения */
-column-rule: inherit;
-column-rule: initial;
-column-rule: unset;
-
-
-Свойство column-rule указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.
-
-Значения
-
-
- <'column-rule-width'>{{cssxref("<length>")}} или одно из трёх ключевых свойств, thin, medium, или thick. См. подробно - {{cssxref("border-width")}}.
- <'column-rule-style'>См. подробно {{cssxref("border-style")}} .
- <'column-rule-color'>Значение {{cssxref("<color>")}} .
-
-
-Формальный синтаксис
-
-{{csssyntax}}
-
-Примеры
-
-Example 1
-
-/* Аналогично "medium dotted currentColor" */
-p.foo { column-rule: dotted; }
-
-/* Аналогично "medium solid blue" */
-p.bar { column-rule: solid blue; }
-
-/* Аналогично "8px solid currentColor" */
-p.baz { column-rule: solid 8px; }
-
-p.abc { column-rule: thick inset blue; }
-
-
-Example 2
-
-HTML
-
-<p class="content-box">
- This is a bunch of text split into three columns.
- Take note of how the `column-rule` property is used
- to adjust the style, width, and color of the rule
- that appears between the columns.
-</p>
-
-
-CSS
-
-.content-box {
- padding: 0.3em;
- background: #ff7;
- column-count: 3;
- column-rule: inset 2px #33f;
-}
-
-
-Результат
-
-{{EmbedLiveSample('Example_2')}}
-
-Спецификации
-
-{{Specifications}}
-
-{{cssinfo}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
diff --git a/files/ru/web/css/column-rule/index.md b/files/ru/web/css/column-rule/index.md
new file mode 100644
index 00000000000000..8303fa735f0f87
--- /dev/null
+++ b/files/ru/web/css/column-rule/index.md
@@ -0,0 +1,100 @@
+---
+title: column-rule
+slug: Web/CSS/column-rule
+tags:
+ - мультиколоночная вёрстка
+translation_of: Web/CSS/column-rule
+---
+{{CSSRef}}
+
+[Краткая форма записи](/ru/docs/Web/CSS/Shorthand_properties) [CSS](/ru/docs/Web/CSS) свойств **`column-rule`** устанавливает ширину, стиль и цвет линии, находящейся между колонками в мультиколоночной вёрстке.
+
+{{EmbedInteractiveExample("pages/css/column-rule.html")}}
+
+Эта краткая форма записи задаёт индивидуальные `column-rule-*` свойства, обычно задаваемые: {{Cssxref("column-rule-width")}}, {{Cssxref("column-rule-style")}}, и {{Cssxref("column-rule-color")}}.
+
+> **Примечание:** Как и с другими краткими формами записи, любые индивидуальные значения, не указанные явно принимают значение по умолчанию (возможно переопределение значений, заданных ранее с помощью свойств, не являющихся краткими формами).
+
+## Синтаксис
+
+```css
+column-rule: dotted;
+column-rule: solid 8px;
+column-rule: solid blue;
+column-rule: thick inset blue;
+
+/* глобальные значения */
+column-rule: inherit;
+column-rule: initial;
+column-rule: unset;
+```
+
+Свойство `column-rule` указывается в виде одного, двух или трёх значений, перечисленных ниже, в любом порядке.
+
+### Значения
+
+- `<'column-rule-width'>`
+ - : {{cssxref("<length>")}} или одно из трёх ключевых свойств, `thin`, `medium`, или `thick`. См. подробно - {{cssxref("border-width")}}.
+- `<'column-rule-style'>`
+ - : См. подробно {{cssxref("border-style")}} .
+- `<'column-rule-color'>`
+ - : Значение {{cssxref("<color>")}} .
+
+### Формальный синтаксис
+
+{{csssyntax}}
+
+## Примеры
+
+### Example 1
+
+```css
+/* Аналогично "medium dotted currentColor" */
+p.foo { column-rule: dotted; }
+
+/* Аналогично "medium solid blue" */
+p.bar { column-rule: solid blue; }
+
+/* Аналогично "8px solid currentColor" */
+p.baz { column-rule: solid 8px; }
+
+p.abc { column-rule: thick inset blue; }
+```
+
+### Example 2
+
+#### HTML
+
+```html
+
+ This is a bunch of text split into three columns.
+ Take note of how the `column-rule` property is used
+ to adjust the style, width, and color of the rule
+ that appears between the columns.
+
+```
+
+#### CSS
+
+```css
+.content-box {
+ padding: 0.3em;
+ background: #ff7;
+ column-count: 3;
+ column-rule: inset 2px #33f;
+}
+```
+
+#### Результат
+
+{{EmbedLiveSample('Example_2')}}
+
+## Спецификации
+
+{{Specifications}}
+
+{{cssinfo}}
+
+## Поддержка браузерами
+
+{{Compat}}
diff --git a/files/ru/web/css/column_combinator/index.html b/files/ru/web/css/column_combinator/index.html
deleted file mode 100644
index 3108d2a9ad11cb..00000000000000
--- a/files/ru/web/css/column_combinator/index.html
+++ /dev/null
@@ -1,80 +0,0 @@
----
-title: Комбинатор столбцов
-slug: Web/CSS/Column_combinator
-tags:
- - Вёрстка
- - Селекторы
-translation_of: Web/CSS/Column_combinator
----
-{{CSSRef("Selectors")}}{{SeeCompatTable}}
-
-Комбинатор столбцов (||) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.
-
-/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
-col.selected || td {
- background: gray;
-}
-
-
-Синтаксис
-
-column-selector || cell-selector {
- /* свойства стиля */
-}
-Примеры
-
-HTML
-
-<table border="1">
- <colgroup>
- <col span="2"/>
- <col class="selected"/>
- </colgroup>
- <tbody>
- <tr>
- <td>A
- <td>B
- <td>C
- </tr>
- <tr>
- <td colspan="2">D</td>
- <td>E</td>
- </tr>
- <tr>
- <td>F</td>
- <td colspan="2">G</td>
- </tr>
- </tbody>
-</table>
-
-CSS
-
-col.selected || td {
- background: gray;
- color: white;
- font-weight: bold;
-}
-
-Result
-
-{{EmbedLiveSample("Примеры", "100%")}}
-
-Спецификации
-
-{{Specifications}}
-
-Поддержка браузерами
-
-
-
-{{Compat}}
-
-Смотрите также
-
-
- {{HTMLElement("col")}}
- {{HTMLElement("colgroup")}}
- {{CSSxRef("grid")}}
-
diff --git a/files/ru/web/css/column_combinator/index.md b/files/ru/web/css/column_combinator/index.md
new file mode 100644
index 00000000000000..405c2d78832765
--- /dev/null
+++ b/files/ru/web/css/column_combinator/index.md
@@ -0,0 +1,80 @@
+---
+title: Комбинатор столбцов
+slug: Web/CSS/Column_combinator
+tags:
+ - Вёрстка
+ - Селекторы
+translation_of: Web/CSS/Column_combinator
+---
+{{CSSRef("Selectors")}}{{SeeCompatTable}}
+
+**Комбинатор столбцов** (`||`) помещается между двумя селекторами CSS. Он соответствует только тем элементам, которым соответствует второй селектор, которые принадлежат элементам столбца, соответствующим первому.
+
+```css
+/* Ячейки таблицы, принадлежащие к столбцу "выделено" */
+col.selected || td {
+ background: gray;
+}
+```
+
+## Синтаксис
+
+ column-selector || cell-selector {
+ /* свойства стиля */
+ }
+
+## Примеры
+
+### HTML
+
+```html
+
+
+
+
+
+ A
+ B
+ C
+
+
+ D
+ E
+
+
+ F
+ G
+
+
+
+```
+
+### CSS
+
+```css
+col.selected || td {
+ background: gray;
+ color: white;
+ font-weight: bold;
+}
+```
+
+### Result
+
+{{EmbedLiveSample("Примеры", "100%")}}
+
+## Спецификации
+
+{{Specifications}}
+
+## Поддержка браузерами
+
+{{Compat}}
+
+## Смотрите также
+
+- {{HTMLElement("col")}}
+- {{HTMLElement("colgroup")}}
+- {{CSSxRef("grid")}}
diff --git a/files/ru/web/css/comments/index.html b/files/ru/web/css/comments/index.html
deleted file mode 100644
index cdc6eff0c0ebc2..00000000000000
--- a/files/ru/web/css/comments/index.html
+++ /dev/null
@@ -1,51 +0,0 @@
----
-title: Комментарии
-slug: Web/CSS/Comments
-tags:
- - Beginner
- - CSS
- - CSS Reference
- - Комментарии
- - Новичку
- - Руководство
-translation_of: Web/CSS/Comments
-original_slug: Web/CSS/Тихий
----
-{{CSSRef}}
-
-Описание
-
-Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.
-
-Синтаксис
-
-/* Комментарий */
-
-Примеры
-
-/* Однострочный комментарий */
-
-/*
-Комментарий
-который содержит
-несколько
-строк
-*/
-
-
-Замечания
-
-Данный /* */ синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент <style>, вы можете использовать <!-- -->, чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /* */ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса */, которая следует за /* закрывает комментарий.
-
-Спецификации
-
-
-
-Смотрите также
-
-
diff --git a/files/ru/web/css/comments/index.md b/files/ru/web/css/comments/index.md
new file mode 100644
index 00000000000000..4a8e54e8e0b0a1
--- /dev/null
+++ b/files/ru/web/css/comments/index.md
@@ -0,0 +1,48 @@
+---
+title: Комментарии
+slug: Web/CSS/Comments
+tags:
+ - Beginner
+ - CSS
+ - CSS Reference
+ - Комментарии
+ - Новичку
+ - Руководство
+translation_of: Web/CSS/Comments
+original_slug: Web/CSS/Тихий
+---
+{{CSSRef}}
+
+## Описание
+
+Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.
+
+## Синтаксис
+
+ /* Комментарий */
+
+## Примеры
+
+```css
+/* Однострочный комментарий */
+
+/*
+Комментарий
+который содержит
+несколько
+строк
+*/
+```
+
+## Замечания
+
+Данный `/* */` синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент \
+
+
+
+
+
+
Division Element #1
+ position: relative;
+
+
+
+
Division Element #2
+ position: relative;
+
+
+
+
+
+
Division Element #4
+ position: relative;
+
+
+
Division Element #3
+
position: absolute;
+
+
+
Division Element #5
+ position: relative;
+
+
+
+
Division Element #6
+ position: absolute;
+
+
+