CSS Layout cookbook - CSS: каскадные таблицы стилей

CSS Layout cookbook
===================

 Книга рецептов CSS объединяет примеры большинства наиболее распространённых лейаут паттернов, которые могу встретиться вам при разработке веб-сайтов.

 В дополнение к представленным примерам кода, - которые вы вполне можете использовать в качестве отправной точки для своих проектов, - эти рецепты иллюстрируют нестандартные способы применения существующих лейаут (layout) спецификаций. Паттерны, представленные ниже, должны помочь вам увидеть новые варианты решения проблем, встречающихся в жизни разработчика.
 **Примечание.** Если вы новичок в в работе с CSS, то сначала вы можете взглянуть на наш модуль обучения макетам CSS, так как он даст вам базовые знания, необходимые для использования приведённых здесь рецептов.

The Recipes
-----------

| Recipe | Description | Layout Methods |
| --- | --- | --- |
| Media Objects (en-US) | A two-column box with an image on one side and descriptive text on the other, e.g. a facebook post or tweet. | CSS Grid, `float` fallback, `fit-content` (en-US) sizing |
| Columns (en-US) | When to choose multi-column layout, flexbox or grid for your columns | CSS Grid, Multicol (en-US), Flexbox |
| Center an element (en-US) | How to center an item horizontally and vertically | Flexbox, Box Alignment |
| Sticky footers | Creating a footer which sits at the bottom of the container or viewport when the content is shorter. | CSS Grid, Flexbox |
| Split Navigation | A navigation pattern where some links are visually separated from the others. | Flexbox, `margin` |
| Breadcrumb Navigation | Creating a list of links to allow the visitor to navigate back up through the page hierarchy. | Flexbox |

Contribute a Recipe
-------------------

As with all of MDN we would love you to contribute a recipe in the same format as the ones shown above. See this page for a template and guidelines for writing your own example.


Селектор следующего элемента - CSS: каскадные таблицы стилей

Селектор следующего элемента
============================

Описание
--------

Общий комбинатор смежных селекторов `(~)` разделяет два селектора и находит второй элемент только если ему предшествует первый, и они оба имеют общего родителя. Свойства будут применены ко всем элементам, указанным в правой части, следующим за элементом, указанным в левой части.

Синтаксис
---------
```

element ~ element { style properties }
```

Пример
------

```css
p ~ span {
  color: red;
}
```

```html
<span>Это не красный.</span>
<p>Здесь параграф.</p>
<code>Тут какой-то код.</code>
<span>А здесь span.</span>
```

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # general-sibling-combinators |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Смежные селекторы


:visited - CSS: каскадные таблицы стилей

:visited
========

Описание
--------

CSS псевдокласс `:visited` позволяет вам выбирать ссылки, которые были посещены. Этот стиль может переопределяться другими относящимися к ссылкам псевдоклассами, такими как `:link`, `:hover` и `:active`, появляющимися в соответствующем порядке. Чтобы стилизировать ссылки должным образом, вставьте правило `:visited` после правила `:link` до правил `:hover` и `:active`, как определено *LVHA-порядком*: `:link` — `:visited` — `:hover` — `:active`.

**Примечание:** Из-за причин приватности, браузеры строго ограничивают стили, которые вы можете применить к элементу, используя этот псевдокласс: только `color` (en-US), `background-color`, `border-color` (en-US), `border-bottom-color` (en-US), `border-left-color` (en-US), `border-right-color` (en-US), `border-top-color` (en-US), `outline-color`, `column-rule-color`, `fill` и `stroke`. Компонент альфа-канала в доступных стилях будет игнорироваться. Вместо него будет использоваться альфа-канал, используемый для непосещённых ссылок. Если в цвете альфа-канала для посещённых ссылок задан `0`, то в этом случае будет использоваться цвет непосещённых ссылок.Несмотря на то, что цвет может меняться, метод `getComputedStyle` наврёт и всегда будет давать значение цвета непосещённых ссылок.Для дополнительной информации об ограничениях и их причин, смотрите Приватность и селектор :visited (en-US).

Примеры
-------

```css
a:visited {
  color: #4b2f89;
}
a:visited {
  background-color: white;
}
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-visited |
| Selectors Level 4 # link |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Приватность и селектор :visited (en-US)
* Относящиеся к ссылкам псевдоклассы: `:link`, `:active` и `:hover`.


Наследование - CSS: каскадные таблицы стилей

Наследование
============

Описание
--------

Описание каждого CSS-свойства говорит наследуется ли оно по умолчанию ("Наследуется: да/нет"). Наследование контролирует, что происходит, если значение свойства элемента не определено.

Наследуемые свойства
--------------------

Когда никакого значения для **свойства, которое наследуется**, у элемента не установлено, элемент получает вычисленное значение этого свойства от его родителя. Только корневой элемент документа получает начальное значение из описания свойства.

Типичный пример наследуемого свойства `color` (en-US). Стили:

```css
p {
  color: green;
}
```

и разметка:

```html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
```

слова "подчёркнутый текст" станут зелёными, т.к. тег `em` унаследовал значение свойства `color` (en-US) от элемента `p`, а не получают начальное значение свойства (цвет, который используется для корневого элемента, когда страница не определяет цвет).

Ненаследуемые свойства
----------------------

Когда значения **свойства** элемента, которое **не наследуется**, не указано(иногда называемое Mozilla - **сброшенное свойство**), элемент получает начальное значение этого свойства (как указано в описании свойства).

Пример ненаследуемого свойства `border`. Стили:

```css
p {
  border: medium solid;
}
```

и разметка:

```html
<p>В этом параграфе <em>подчёркнутый текст</em>.</p>
```

у слов "подчёркнутый текст" не будет рамки (т.к. начальное значение `border-style` (en-US): `none`).

Замечание
---------

Ключевое слово `inherit` позволяет нам явно задать наследование. Это работает и на наследуемых, и на ненаследуемых свойствах.

Смотрите также
--------------

* CSS документация
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы
* `inherit`


:focus-visible - CSS: каскадные таблицы стилей

:focus-visible
==============

Baseline 2022
-------------

Newly availableSince March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Псевдокласс **`:focus-visible`** применяется, в то время как элемент соответствует псевдоклассу :focus, и UA (User Agent) определяет с помощью эвристики, что фокус должен быть сделан очевидным для элемента.

Этот селектор полезен для предоставления другого индикатора фокуса, основанного на модальности ввода пользователя (мышь против клавиатуры).

Синтаксис
---------

Error: could not find syntax for this itemПример
------

### Базовый пример

В этом примере селектор `:focus-visible` использует поведение UA, чтобы определить, когда соответствовать. Сравните, что происходит, когда вы щёлкаете мышью по разным элементам управления, и что происходит при переходе по ним с помощью клавиатуры. Обратите внимание на разницу в поведении элементов, оформленных с помощью `:focus`.

```html
<input value="Default styles" /><br />
<button>Default styles</button><br />
<input class="focus-only" value=":focus only" /><br />
<button class="focus-only">:focus only</button><br />
<input class="focus-visible-only" value=":focus-visible only" /><br />
<button class="focus-visible-only">:focus-visible only</button>
```

```css
input,
button {
  margin: 10px;
}

.focus-only:focus {
  outline: 2px solid black;
}

.focus-visible-only:focus-visible {
  outline: 4px dashed darkorange;
}
```

### Выборочное отображение индикатора фокусировки

Пользовательский элемент управления, такой как кнопка настраиваемого элемента, может использовать: focus-visible для выборочного применения индикатора фокуса только к фокусу клавиатуры. Это соответствует собственному поведению фокуса для таких элементов управления, как `<button>`.

```html
<custom-button tabindex="0" role="button">Click Me</custom-button>
```

```css
custom-button {
  display: inline-block;
  margin: 10px;
}

custom-button:focus {
  /\* Обеспечьте резервный стиль для браузеров,
которые не поддерживают: focus-visible \*/
  outline: none;
  background: lightgrey;
}

custom-button:focus:not(:focus-visible) {
  /\* Remove the focus indicator on mouse-focus for browsers
 that do support :focus-visible \*/
  background: transparent;
}

custom-button:focus-visible {
  /\* Draw a very noticeable focus style for
 keyboard-focus on browsers that do support
 :focus-visible \*/
  outline: 4px dashed darkorange;
  background: transparent;
}
```

Polyfill
--------

You can polyfill `:focus-visible` using focus-visible.js.

Accessibility concerns
----------------------

### Low vision

Make sure the visual focus indicator can be seen by people with low vision. This will also benefit anyone use a screen in a brightly lit space (like outside in the sun). WCAG 2.1 SC 1.4.11 Non-Text Contrast requires that the visual focus indicator be at least 3 to 1.

* Accessible Visual Focus Indicators: Give Your Site Some Focus! Tips for Designing Useful and Usable Focus Indicators
### Cognition

It may not be obvious as to why the focus indicator is appearing and disappearing if a person is using mixed forms of input. For users with cognitive concerns, or who are less technologically literate, this lack of consistent behavior for interactive elements may be confusing.

Specifications
--------------

| Specification |
| --- |
| Selectors Level 4 # the-focus-visible-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:focus`
* `:focus-within`


z-index - CSS: каскадные таблицы стилей

z-index
=======

CSS-свойство **`z-index`** определяет положение позиционированного элемента и его дочерних элементов или флекс-элементов по оси z. Перекрывающие элементы с большим значением z-index будут накладываться поверх элементов с меньшим z-index.

Интерактивный пример
--------------------

Для позиционированного элемента (т.е. если у него задано свойство `position` со значением, отличающимся от `static`) свойство `z-index` отвечает за:

1. Порядок наложения в текущем контексте наложения.
2. Возможность создания локального контекста наложения.
Синтаксис
---------

```css
/\* Ключевые слова \*/
z-index: auto;

/\* Значения типа <integer> \*/
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /\* Отрицательные значения понижают приоритет \*/

/\* Глобальные значения \*/
z-index: inherit;
z-index: initial;
z-index: revert;
z-index: revert-layer;
z-index: unset;
```

Значением свойства `z-index` может быть либо `auto`, либо целое число (`<integer>`).

### Значения

`auto`

Элемент не будет создавать нового локального контекста наложения. Порядок наложения блока в текущим контексте наложения будет равен `0`.

`<integer>`

Порядок наложения блока, заданный в виде целого числа (`<integer>`) в текущем контексте наложения. При этом элемент создаёт новый локальный контекст наложения. Таким образом значения z-index дочерних элементов внутри нового контекста наложения не будут сравниваться со значениями z-index элементов за пределами этого блока.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | позиционированные элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | целое число |
| Создаёт контекст наложения | да |

Формальный синтаксис
--------------------
```

z-index =
  auto       | (en-US)
  <integer>  | (en-US)
  inherit

```

Примеры
-------

### Визуальное наложение элементов

#### HTML

```html
<div class="wrapper">
  <div class="dashed-box">Пунктирный блок</div>
  <div class="gold-box">Блок золотого цвета</div>
  <div class="green-box">Зелёный блок</div>
</div>
```

#### CSS

```css
.wrapper {
  position: relative;
}

.dashed-box {
  position: relative;
  z-index: 1;
  border: dashed;
  height: 8em;
  margin-bottom: 1em;
  margin-top: 2em;
}
.gold-box {
  position: absolute;
  z-index: 3; /\* помещаем .gold-box поверх .green-box и .dashed-box \*/
  background: gold;
  width: 80%;
  left: 60px;
  top: 3em;
}
.green-box {
  position: absolute;
  z-index: 2; /\* помещаем .green-box поверх .dashed-box \*/
  background: lightgreen;
  width: 20%;
  left: 65%;
  top: -25px;
  height: 7em;
  opacity: 0.9;
}
```

#### Результат

Спецификации
------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # z-index |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* CSS-свойство `position`
* Понимание CSS z-index


background-repeat - CSS: каскадные таблицы стилей

background-repeat
=================

Свойство **`background-repeat`** устанавливает, как фоновые изображения будет повторяться. Они могут повторяться по горизонтальной и вертикальной оси или не повторяться вовсе.

Интерактивный пример
--------------------

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста, клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение.

По умолчанию, изображения обрезаются по размеру элемента, но их можно масштабировать (используя `round`) или равномерно растянуть от конца к концу (используя `space`).

Синтаксис
---------

```css
/\* Ключевые слова \*/
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-свойства `background-position` игнорируется для рассматриваемого направления, за исключением случаев, когда отдельное изображение больше области рисования фонового изображения, что является единственным случаем, когда изображение может быть обрезано, когда используется значение `space`. |
| `round` | Изображение повторяется в заданном направлении столько раз, сколько необходимо, чтобы покрыть большую часть области рисования фонового изображения, не обрезая изображение. Если оно не покрывает точно область, плитки изменяются в этом направлении, чтобы соответствовать ей. |
| `no-repeat` | Изображение не повторяется (и, следовательно, область рисования фонового изображения не обязательно будет полностью покрыта). Расположение неповторяющегося фонового изображения определяется CSS-свойством `background-position`. |

Примеры
-------

### HTML

```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

```css
/\* Совместно для всех DIVS в примере \*/
li {
  margin-bottom: 12px;
}
div {
  background-image: url(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(starsolid.gif),
    url(https://developer.mozilla.org/static/img/favicon32.png);
  background-repeat: repeat-x, repeat-y;
  height: 144px;
}
```

### Результат

В этом примере каждому элементу списка соответствует другое значение `background-repeat`.

Спецификация
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-repeat |

|  |  |
| --- | --- |
| Начальное значение | `repeat` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Обработка значения | список, каждый элемент которого содержит 2 ключевых слова, по одному на размер |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование нескольких CSS фонов (en-US)


CSS Table - CSS: каскадные таблицы стилей

CSS Table
=========

**CSS Table** - модуль в CSS, который определяет, как размещать данные в таблицах.

Справка
-------

### Свойства

* `border-collapse` (en-US)
* `border-spacing` (en-US)
* `caption-side` (en-US)
* `empty-cells` (en-US)
* `table-layout` (en-US)
* `vertical-align`
Руководства
-----------

*Нет.*

Спецификации
------------

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification  |


font-style - CSS: каскадные таблицы стилей

font-style
==========

**`font-style`** это CSS-свойство определяющее каким образом шрифт должен быть стилизирован, будь то это normal, italic, или oblique face из его `font-family`.

Интерактивный пример
--------------------

**Italic** шрифты в общем курсивные по своей сути, обычно занимают меньше горизонтального пространства чем их нестилизированные копии, тогда как **oblique** шрифты обычно просто наклонная версия регулярного шрифта. Когда определённый стиль не доступен, оба italic и oblique шрифты симулируются искусственно наклоняя глифы регулярного шрифта (используйте `font-synthesis` (en-US) для управления этим поведением).

Syntax
------

```css
font-style: normal;
font-style: italic;
font-style: oblique;

/\* Глобальные значения \*/
font-style: inherit;
font-style: initial;
font-style: unset;
```

Свойство `font-style` определяется как единственное ключевое слово выбранное из списка значений внизу.

### Values

`normal`

Выделяет шрифт который классифицирован как `normal` в `font-family`.

`italic`

Выделяет шрифт который классифицирован как `italic`. Если не доступна курсивная версия шрифта, взамен используется `oblique` классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

`oblique`

Выделяет шрифт который классифицирован как `oblique`. Если не доступна косая версия шрифта, взамен используется `italic` классификация. Если не одна версия не доступна, то стиль симулируется искусственно.

### Formal syntax
```

font-style =
  normal                           | (en-US)
  italic                           | (en-US)
  oblique <angle [-90deg,90deg]>? (en-US)

```

Examples
--------

### Font styles
```

<p class="normal">This paragraph is normal.</p>
<p class="italic">This paragraph is italic.</p>
<p class="oblique">This paragraph is oblique.</p>
```

```css
.normal {
  font-style: normal;
}

.italic {
  font-style: italic;
}

.oblique {
  font-style: oblique;
}
```

Specifications
--------------

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-style-prop |

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | all elements and text. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type; `normal` animates as `oblique 0deg` |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


CSS basic data types - CSS: каскадные таблицы стилей

CSS basic data types
====================

Базовые типы данных в **CSS** определяют типичные значения (включая ключевые слова и единицы измерения), принимаемые CSS-свойствами и функциями. Они являются частным случаем component value type.

В формальном синтаксисе типы данных обозначаются ключевыми словами, расположенными межу символами неравенства "<" и">".

Справка
-------

* `<angle>`
* `<basic-shape>` (en-US)
* `<blend-mode>` (en-US)
* `<color>`
* `<custom-ident>`
* `<filter-function>`
* `<flex>`
* `<frequency>` (en-US)
* `<gradient>` (en-US)
* `<image>` (en-US)
* `<integer>`
* `<length>`
* `<number>`
* `<percentage>`
* `<position>` (en-US)
* `<ratio>`
* `<resolution>` (en-US)
* `<shape-box>` (en-US)
* `<single-transition-timing-function>` (en-US)
* `<string>` (en-US)
* `<time>`
* `<transform-function>` (en-US)
* `<url>()` (en-US)
Спецификация
------------

| Specification |
| --- |
| CSS Values and Units Module Level 4  |


animation-delay - CSS: каскадные таблицы стилей

animation-delay
===============

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Описание
--------

CSS свойство **`animation-delay`** определяет время задержки перед стартом анимации.

Интерактивный пример
--------------------

Значение 0s, которое является значением по умолчанию, указывает на то, что анимация должна начаться непременно. В противном случае, старт анимации будет отложен на указанное время.

При указании отрицательного значения, анимация также начнётся непременно, но её воспроизведение начнётся не с первого ключевого кадра, а так, будто часть анимации уже была показана. Например, если вы укажете значение -1s, анимация будет начата с ключевого кадра, когда 1 секунда анимации уже была воспроизведена.

|  |  |
| --- | --- |
| Начальное значение | `0s` |
| Применяется к | все элементы, `::before` и `::after` псевдоэлементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

Синтаксис
---------

```css
animation-delay: 3s;
animation-delay: 2s, 4ms;
```

### Значения

`<time>`

Время задержки перед стартом анимации. Может быть определено в секундах (s), либо в миллисекундах (ms). Если вы не укажите единицу измерения, свойство будет недействительным.

### Формальный синтаксис
```

animation-delay =
  <time># (en-US)

```

Примеры
-------

Посмотрите CSS-анимации (en-US) для примера.

Спецификации
------------

| Specification |
| --- |
| CSS Animations Level 1 # animation-delay |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Использование CSS-анимаций (en-US)
* `AnimationEvent`


color-scheme - CSS: каскадные таблицы стилей

color-scheme
============

CSS-свойство **`color-scheme`** позволяет указать цветовые схемы, в которых может быть отображён текущий элемент.

Как правило, в операционных системах используется "светлые" и "тёмные" цветовые схемы, например, одна для дневного времени суток, другая — для ночного. Когда пользователь включает одну из них, операционная система подстраивает графический интерфейс под выбранную цветовую схему. К этому также относятся элементы форм, полосы прокрутки и используемые цвета системных цветов в CSS.

Синтаксис
---------

```css
color-scheme: normal;
color-scheme: light;
color-scheme: dark;
color-scheme: light dark;

/\* Глобальные значения \*/
color-scheme: inherit;
color-scheme: initial;
color-scheme: revert;
color-scheme: revert-layer;
color-scheme: unset;
```

Свойство `color-scheme` принимает одно из следующих ключевых слов.

### Значения

`normal`

Означает, что элемент не осведомлён о каких-либо цветовых схемах, поэтому он должен использовать цветовую схему по умолчанию.

`light`

Означает, что элемент может быть отображён в светлой цветовой схеме операционной системы.

`dark`

Означает, что элемент может быть отображён в тёмной цветовой схеме операционной системы.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `normal` |
| Применяется к | all elements and text |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |

Формальный синтаксис
--------------------
```

color-scheme =
  normal                                       | (en-US)
  [ (en-US) light | (en-US) dark | (en-US) <custom-ident> ] (en-US)+ (en-US) && (en-US) only? (en-US)

```

Примеры
-------

### Использование цветовой схемы

Чтобы применить ко всей странице текущую цветовую схему пользователя, нужно определить свойство `color-scheme` для элемента `:root`.

```css
:root {
  color-scheme: light dark;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Color Adjustment Module Level 1 # color-scheme-prop |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Применение цвета к HTML-элементам с помощью CSS
* Другие свойства, относящиеся к цвету: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, `caret-color` (en-US), and `column-rule-color`
* `background-image`
* `print-color-adjust` (en-US)


appearance (-moz-appearance, -webkit-appearance) - CSS: каскадные таблицы стилей

appearance (-moz-appearance, -webkit-appearance)
================================================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS-свойство **`-moz-appearance`** используется в Gecko (Firefox) для отображения элемента, используя базовые стили платформы на основе темы операционной системы.

Свойство **`-webkit-appearance`** используется в браузерах WebKit-based (например, Safari) и Blink-based (например, Chrome, Opera) для того же эффекта. Заметьте, что Firefox и Edge также поддерживают `-webkit-appearance`, для обеспечения совместимости.

Интерактивный пример
--------------------

Это свойство часто используется в таблицах стилей XUL для разработки пользовательских виджетов в стиле, соответствующем платформе. Оно, также, используется в реализации 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` может быть указано как одно значение, выбранное из списка ниже.

### Значения

`<appearance>` является одним из нижеследующих ключевых свойств:

| Value | Browser | Description |
| --- | --- | --- |
| `none` | Firefox Chrome Safari Edge | Hides certain features of widgets, such as arrow displayed in select element, indicating that list can be expanded. |
| `auto` | Firefox Chrome Edge |
 The user agent selects the appropriate special styling based on the
 element. Acts as `none` on elements with no special styling.
  |
| `menulist-button` | Firefox Chrome Safari Edge |  |
| `textfield` | Firefox Chrome Safari Edge |  |
| The following values are treated as equivalent to `auto`: |
| `button` | Firefox Chrome Safari Edge | The element used to be drawn like a button. |
| `checkbox` | Firefox Chrome Safari Edge |
 The element used to be drawn like a checkbox, including only the actual
 "checkbox" portion.
  |
| `listbox` | Firefox Chrome Safari Edge |  |
| `menulist` | Firefox Chrome Safari Edge |  |
| `meter` | Chrome Safari Firefox |  |
| `progress-bar` | Chrome Safari Firefox |  |
| `push-button` | Chrome Safari Edge |  |
| `radio` | Firefox Chrome Safari Edge |
 The element used to be drawn like a radio button, including only the actual
 "radio button" portion.
  |
| `searchfield` | Firefox Chrome Safari Edge |  |
| `slider-horizontal` | Chrome Safari Edge |  |
| `square-button` | Chrome Safari Edge |  |
| `textarea` | Firefox Chrome Safari Edge |  |

#### Non-standard keywords

The following values may be operational on historical browser versions using **`-moz-appearance`** or **`-webkit-appearance`** prefix, but not on the standard **`appearance`** property.

| Value | Browser | Description |
| --- | --- | --- |
| `attachment` | Safari |  |
| `borderless-attachment` | Safari |  |
| `button-bevel` | Firefox Chrome Safari Edge |  |
| `caps-lock-indicator` | Safari Edge |  |
| `caret` | Firefox Chrome Safari Edge |  |
| `checkbox-container` | 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` | Firefox |  |
| `checkmenuitem` | Firefox |  |
| `color-well` | Safari | `input type=color` |
| `continuous-capacity-level-indicator` | Safari |  |
| `default-button` | Safari Edge |  |
| `discrete-capacity-level-indicator` | Safari |  |
| `inner-spin-button` | Firefox Chrome Safari |  |
| `image-controls-button` | Safari |  |
| `list-button` | Safari | datalist |
| `listitem` | Firefox Chrome Safari Edge |  |
| `media-enter-fullscreen-button` | Chrome Safari |  |
| `media-exit-fullscreen-button` | Chrome Safari |  |
| `media-fullscreen-volume-slider` | Safari |  |
| `media-fullscreen-volume-slider-thumb` | Safari |  |
| `media-mute-button` | Chrome Safari Edge |  |
| `media-play-button` | Chrome Safari Edge |  |
| `media-overlay-play-button` | Chrome Safari |  |
| `media-return-to-realtime-button` | Safari |  |
| `media-rewind-button` | Safari |  |
| `media-seek-back-button` | Safari Edge |  |
| `media-seek-forward-button` | Safari Edge |  |
| `media-toggle-closed-captions-button` | Chrome Safari |  |
| `media-slider` | Chrome Safari Edge |  |
| `media-sliderthumb` | Chrome Safari Edge |  |
| `media-volume-slider-container` | Chrome Safari |  |
| `media-volume-slider-mute-button` | Safari |  |
| `media-volume-slider` | Chrome Safari |  |
| `media-volume-sliderthumb` | Chrome Safari |  |
| `media-controls-background` | Chrome Safari |  |
| `media-controls-dark-bar-background` | Safari |  |
| `media-controls-fullscreen-background` | Chrome Safari |  |
| `media-controls-light-bar-background` | Safari |  |
| `media-current-time-display` | Chrome Safari |  |
| `media-time-remaining-display` | Chrome Safari |  |
| `menulist-text` | Firefox Chrome Safari Edge |  |
| `menulist-textfield` | Firefox Chrome Safari Edge | The element is styled as the text field for a menulist. (Not implemented for the Windows platform) |
| `meterbar` | Firefox | Use `meter` instead. |
| `number-input` | Firefox |  |
| `progress-bar-value` | Chrome Safari |  |
| `progressbar` | Firefox | The element is styled like a progress bar. Use `progress-bar` instead |
| `progressbar-vertical` | Firefox |  |
| `range` | Firefox |  |
| `range-thumb` | Firefox |  |
| `rating-level-indicator` | Safari |  |
| `relevancy-level-indicator` | Safari |  |
| `scale-horizontal` | Firefox |  |
| `scalethumbend` | Firefox |  |
| `scalethumb-horizontal` | Firefox |  |
| `scalethumbstart` | Firefox |  |
| `scalethumbtick` | Firefox |  |
| `scalethumb-vertical` | Firefox |  |
| `scale-vertical` | Firefox |  |
| `scrollbarthumb-horizontal` | Firefox |  |
| `scrollbarthumb-vertical` | Firefox |  |
| `scrollbartrack-horizontal` | Firefox |  |
| `scrollbartrack-vertical` | Firefox |  |
| `searchfield-decoration` | Safari Edge |  |
| `searchfield-results-decoration` | Chrome Safari Edge | (Works on Chrome 51 on Windows 7) |
| `searchfield-results-button` | Safari Edge |  |
| `searchfield-cancel-button` | Chrome Safari Edge |  |
| `snapshotted-plugin-overlay` | Safari |  |
| `sheet` | None |  |
| `slider-vertical` | Chrome Safari Edge |  |
| `sliderthumb-horizontal` | Chrome Safari Edge |  |
| `sliderthumb-vertical` | Chrome Safari Edge |  |
| `textfield-multiline` | Firefox | Use `textarea` instead. |
| `-apple-pay-button` | Safari | **iOS and macOS only**. Available on the web starting in iOS 10.1 and macOS 10.12.1 |

Formal definition
-----------------

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

### Формальный синтаксис
```

appearance =
  none              | (en-US)
  auto              | (en-US)
  <compat-auto>     | (en-US)
  <compat-special>

<compat-auto> =
  searchfield   | (en-US)
  textarea      | (en-US)
  checkbox      | (en-US)
  radio         | (en-US)
  menulist      | (en-US)
  listbox       | (en-US)
  meter         | (en-US)
  progress-bar  | (en-US)
  button

<compat-special> =
  textfield        | (en-US)
  menulist-button

```

Примеры
-------

Нижеприведённый пример показывает, как сделать элемент, выглядящий как кнопка панели инструментов в Firefox:

```css
.exampleone {
  -moz-appearance: toolbarbutton;
}
```

Смотрите также this JSFiddle в качестве примера, показывающего как вы можете использовать `appearance: none` для стилизации радио кнопок и чекбоксов.

Спецификации
------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # appearance-switching |

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | discrete |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Definition of `appearance` in CSS 3 Basic User Interface (Candidate Recommendation from 2004-05-11).
* Dropped CSS3 features from the UI spec.4


:focus-within - CSS: каскадные таблицы стилей

:focus-within
=============

CSS Псевдо-класс **`:focus-within`** соответствует элементу, который либо сам находится в фокусе, либо содержит элемент, который находится в фокусе. Другими словами, он представляет элементу, который соответствует псевдоклассу `:focus` либо имеет потомка, который соответствует `:focus`. (Включая потомков в shadow trees (en-US).)

```css
/\* Выделяет <div> когда один из его потомков находится в фокусе \*/
div:focus-within {
  background: cyan;
}
```

Этот селектор может оказаться полезным, например, для подсвечивания всего контейнера `<form>`, когда пользователь устанавливает фокус на одном из его полей ввода `<input>`.

Синтаксис
---------

Error: could not find syntax for this itemПример
------

В этом примере форма раскрашивается при помощи специального правила стилей, когда один из её дочерних полей для ввода находится в фокусе.

### HTML

```html
<p>Try typing into this form.</p>

<form>
  <label for="given\_name">Given Name:</label>
  <input id="given\_name" type="text" />
  <br />
  <label for="family\_name">Family Name:</label>
  <input id="family\_name" type="text" />
</form>
```

### CSS

```css
form {
  border: 1px solid;
  color: gray;
  padding: 4px;
}

form:focus-within {
  background: #ff8;
  color: black;
}

input {
  margin: 4px;
}
```

### Итог

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # the-focus-within-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:focus`
* `:focus-visible`
Экспериментальная возможность


:has() - CSS: каскадные таблицы стилей

:has()
======

Baseline 2023
-------------

Newly availableSince December 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

* Learn more
* See full compatibility
* Report feedback
Стили, указанные для элемента с псевдоклассом **`:has()`**, будут применены, если хотя бы один из относительных селекторов, переданных в качестве аргумента, соответствует хотя бы одному элементу.

С помощью данного псевдокласса можно указать стили для родительского или предшествующего элементов.

```css
/\* Отступ снизу будет обнулён только для тегов <h1>,
следом за которыми идёт тег <p> \*/
h1:has(+ p) {
  margin-bottom: 0;
}
```

Псевдокласс `:has()` берет соответствующий список селекторов в качестве аргумента. В ранней версии спецификации CSS Selectors Level 4, `:has` имел ограничение, которое не позволяло использовать его в таблицах стилей; только с использованием функций, как например: `document.querySelector()` (из-за проблем с производительностью). На текущий момент, это ограничение снято, так как ни один из браузеров не реализовал это соответствующим образом.

```css
/\* Выбирает любой тег <a>, если следом за ним находится дочерний элемент <img> \*/
/\* Отмечу, что это не поддерживается ни одним из браузеров \*/
var test = document.querySelector('a:has(> img)');
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

Следующий селектор находит только те теги `<a>`, которые непосредственно содержат дочерний элемент `<img>`:

```css
a:has(> img) {
}
```

Следующий селектор находит только те теги `<h1>` (en-US), при условии, что следом за ними находится элемент `<p>`:

```css
h1:has(+ p) {
}
```

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # relational |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


::-webkit-slider-thumb - CSS: каскадные таблицы стилей

::-webkit-slider-thumb
======================

**Не стандартно:** Эта возможность не является стандартной и стандартизировать её пока никто не собирается. Не используйте её на сайтах, смотрящих во внешний мир: она будет работать не у всех пользователей. Также могут присутствовать большие несовместимости между реализациями и её поведение может в будущем измениться.

Описание
--------

`Псевдоэлемент CSS ::-webkit-slider-thumb` представляет собой ползунок, передвигаемый пользователем по линейке элемента `<input>` типа `"range"` для изменения числового значения атрибута value.

Спецификация
------------

Не является частью какой либо спецификации. Это проприетарный псевдоэлемент исключительно для WebKit/Blink.

Смотрите также
--------------

* `::-webkit-slider-runnable-track` (en-US)
* Похожие псевдоэлементы использующиеся в других браузерах:
    + `::-moz-range-thumb` (en-US)
    + `::-ms-thumb`
* CSS-Tricks: Styling Cross-Browser Compatible Range Inputs with CSS
* QuirksMode: Styling and scripting sliders


margin-inline-start - CSS: каскадные таблицы стилей

margin-inline-start
===================

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Свойство **`margin-inline-start`** CSS задаёт логическое строковое (inline) значение start margin элемента, которое сопоставляется с физическим значением margin в зависимости от режима записи (writing\_mode) элемента, направленности и ориентации текста. Это логическое свойство соответствует одному из свойств `margin-top`, `margin-right`, `margin-bottom`, or `margin-left` в зависимости от значений `writing-mode`, `direction`, and `text-orientation` (en-US).

```css
/\* <length> values \*/
margin-inline-start: 10px; /\* абсолютная величина \*/
margin-inline-start: 1em; /\* относительно размера текста \*/
margin-inline-start: 5%; /\* относительно ширины ближайшего контейнера \*/

/\* Keyword values \*/
margin-inline-start: auto;

/\* Global values \*/
margin-inline-start: inherit;
```

Это свойство связано со свойствами `margin-block-start` (en-US), `margin-block-end` (en-US) и `margin-inline-end`, которые определяют другие компоненты margins элемента.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | с таким же `margin` |
| Наследуется | нет |
| Проценты | зависит от модели макета |
| Обработка значения | если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto` |
| Animation type | длина |

Синтаксис
---------

### Значения

Свойство `margin-inline-start` принимает такие же значения как и свойство `margin-left`.

### Формальный синтаксис
```

margin-inline-start =
  <'margin-top'>

```

Пример
------

### HTML

```html
<div>
  <p class="exampleText">Example text</p>
</div>
```

### CSS

```css
div {
  background-color: yellow;
  width: 120px;
  height: 120px;
}

.exampleText {
  writing-mode: vertical-lr;
  margin-inline-start: 20px;
  background-color: #c8c800;
}
```

Спецификация
------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # margin-properties |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `margin-inline-end`
* Отображаемые физические свойства: `margin-top`, `margin-right`, `margin-bottom` и `margin-left`
* `writing-mode`, `direction`, `text-orientation` (en-US)


column-rule-color - CSS: каскадные таблицы стилей

column-rule-color
=================

CSS свойство **`column-rule-color`** устанавливает цвет линии, расположенной между колонками при мультиколоночной вёрстке.

Интерактивный пример
--------------------

Синтаксис
---------

```css
/\* Значения <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>`.

### Значения

`<color>`

Цвет линий, разделяющих столбцы.

### Формальный синтаксис
```

column-rule-color =
  <color>

```

Пример
------

### HTML

```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

```css
p {
  column-count: 3;
  column-rule-style: solid;
  column-rule-color: blue;
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Multi-column Layout Module Level 1 # crc |

|  |  |
| --- | --- |
| Начальное значение | `currentcolor` |
| Применяется к | мультиколоночные элементы |
| Наследуется | нет |
| Обработка значения | вычисленный цвет |
| Animation type | цвет |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* The `<color>` data type
* Other color-related properties: `color` (en-US), `background-color`, `border-color` (en-US), `outline-color`, `text-decoration-color` (en-US), `text-emphasis-color` (en-US), `text-shadow`, and `caret-color` (en-US)
* Applying color to HTML elements using CSS


Комментарии - CSS: каскадные таблицы стилей

Комментарии
===========

Описание
--------

Комментарии используются для добавления поясняющих заметок или для того, чтобы предотвратить интеграцию части кода в браузер.

Синтаксис
---------

```css
/\* Комментарий \*/
```

Примеры
-------

```css
/\* Однострочный комментарий \*/

/\*
Комментарий
который содержит
несколько
строк
\*/
```

Замечания
---------

Данный `/* */` синтаксис комментария используется для обоих вариантов, и однострочного и многострочного комментария. Нет других способов добавить комментарий во внешнюю таблицу стилей. Также, когда используется элемент <style>, вы можете использовать <!-- -->, чтобы спрятать CSS от старых браузеров, но это не рекомендуется. Как и в большинстве языков программирования, которые используют синтаксис комментариев /\* \*/ , комментарии нельзя вкладывать друг в друга. Другими словами, данная часть синтаксиса \*/, которая следует за /\* закрывает комментарий.

Спецификации
------------

* CSS 2.1 Синтаксис и базовые типы данных #комментарии
Смотрите также
--------------

* Руководство по CSS
* Ключевые концепции CSS
    + Синтаксис CSS
    + @-правила
    + комментарии
    + специфичность
    + наследование
    + блочная модель
    + режимы компоновки
    + модели визуального форматирования
    + Схлопывание отступов
    + Значения
        - начальные
        - вычисленные
        - используемые
        - действительные
    + Синтаксис определения значений (en-US)
    + Сокращённые свойства
    + Замещаемые элементы


widows - CSS: каскадные таблицы стилей

widows
======

Свойство `widows` CSS определяет какое минимальное количество линий должно быть оставлено в начале новой страницы на `paged` носителе. В типографике, «висячая» строка **(***widow)* это последняя строка параграфа, оказавшаяся в начале следующей страницы. Установка свойства `widows` позволяет предотвратить висячие строки.

На нестраничных носителях, таких как `screen`, CSS-свойство `widows` не имеет эффекта.

|  |  |
| --- | --- |
| Начальное значение | `2` |
| Применяется к | блочные контейнеры |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type |

Синтаксис
---------

Formal syntax (en-US):
```

widows =
  <integer [1,∞]>

```

```css
widows: 2
widows: 3

widows: inherit
```

### Значения

`<integer>`

Обозначает минимальное количество строк, которые могут остаться одни вверху новой страницы. Если значение не **положительное**, такое объявление недействительно.

Пример
------

```css
p {
  widows: 3;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |
| CSS Multi-column Layout Module Level 1 # filling-columns |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `orphans`
* `Paged Media`


padding - CSS: каскадные таблицы стилей

padding
=======

Обзор
-----

Свойство **`padding`** устанавливает внутренние отступы/поля со всех сторон элемента. Область отступов это пространство между содержанием элемента и его границей. Отрицательные значения не допускаются.

Свойство `padding` краткая форма записи свойств, чтобы не писать отдельное правило для каждой стороны (`padding-top`, `padding-right`, `padding-bottom`, `padding-left`).

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `padding-bottom` (en-US): `0`
* `padding-left`: `0`
* `padding-right`: `0`
* `padding-top` (en-US): `0`
 |
| Применяется к | все элементы, кроме `table-row-group`, `table-header-group`, `table-footer-group`, `table-row`, `table-column-group` и `table-column`. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `padding-bottom` (en-US): процент, как указан, или абсолютная длина
* `padding-left`: процент, как указан, или абсолютная длина
* `padding-right`: процент, как указан, или абсолютная длина
* `padding-top` (en-US): процент, как указан, или абсолютная длина
 |
| Animation type | длина |

Синтаксис
---------

```css
/\* Применяется для всех 4 сторон \*/
padding: 1em;

/\* По вертикали | По горизонтали \*/
padding: 5% 10%;

/\* Сверху | По горизонтали | Снизу \*/
padding: 1em 2em 2em;

/\* Сверху | Справа | Снизу | Слева \*/
padding: 2px 1em 0 1em;

/\* Глобальные значения \*/
padding: inherit;
padding: initial;
padding: unset;
```

### Значения

Укажите одно, два, три или четыре следующих значения:

`<length>`

Устанавливает неотрицательный, фиксированный размер. Подробнее в разделе `<length>`.

`<percentage>`

Относительно ширины родительского блока.

* **Одно** значение применяется ко всем четырём сторонам
* **Два** значения применяются: **1.** *верхняя и нижняя* и **2.** *левая и правая* стороны
* **Три** значения применяются: **1.** *верхняя*, **2.** *левая и правая* и **3.** *нижняя* стороны
* **Четыре** значения применяются\*\*:\*\* **1.** *верхняя*, **2.** *правая*, **3.** *нижняя* и **4.** *левая* стороны
### Формальное описание синтаксиса
```

padding =
  <'padding-top'>{1,4} (en-US)

```

Примеры
-------

```css
padding: 5%; /\* со всех сторон отступ 5% \*/
```

```css
padding: 10px; /\* со всех сторон отступ 10px \*/
```

```css
padding: 10px 20px;
/\* сверху и снизу отступ 10px \*/
/\* слева и справа отступ 20px \*/
```

```css
padding: 10px 3% 20px;
/\* сверху отступ 10px \*/
/\* слева и справа отступ 3% \*/
/\* снизу отступ 20px \*/
```

```css
padding: 1em 3px 30px 5px;
/\* сверху отступ 1em \*/
/\* справа отступ 3px \*/
/\* снизу отступ 30px \*/
/\* слева отступ 5px \*/
```

border:outset; padding:5% 1em;

Рабочий пример
--------------

### HTML

```html
<h4>Hello world!</h4>
<h3>The padding is different in this line.</h3>
```

### CSS

```css
h4 {
  background-color: green;
  padding: 50px 20px 20px 50px;
}

h3 {
  background-color: blue;
  padding: 400px 50px 50px 400px;
}
```

Спецификации
------------

| Specification |
| --- |
| CSS Box Model Module Level 3 # padding-shorthand |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* CSS Box Model


:defined - CSS: каскадные таблицы стилей

:defined
========

Limited availability
--------------------

This feature is not Baseline because it does not work in some of the most widely-used browsers.

* Learn more
* See full compatibility
* Report feedback
CSS псевдокласс **`:defined`** находит любой элемент, который был определён, включая любой стандартный элемент, встроенный в браузер, и пользовательские элементы (то есть определённые с помощью метода `CustomElementRegistry.define()`).

```css
/\* Находит любой элемент, который был определён \*/
:defined {
  font-style: italic;
}

/\* Выбирает все элементы simple-custom, если пользовательский элемент simple-custom был определён \*/
simple-custom:defined {
  display: block;
}
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

Этот пример включает скрипт, определяющий пользовательский элемент `<simple-custom>`:

```js
customElements.define(
  "simple-custom",
  class extends HTMLElement {
    constructor() {
      super();

      let divElem = document.createElement("div");
      divElem.textContent = this.getAttribute("text");

      let shadowRoot = this.attachShadow({ mode: "open" }).appendChild(divElem);
    }
  },
);
```

Затем мы используем короткий HTML код с элементом `<simple-custom>` и стандартным элементом `<p>`:

```html
<simple-custom text="Текст пользовательского элемента"></simple-custom>

<p>Пример текста стандартного параграфа</p>
```

Теперь немного CSS. Здесь мы определяем цвета фона для разных элементов и используем селектор `:defined`, чтобы поменять шрифт всех определённых элементов на курсив.

```css
/\* Определение разных фонов для разных элементов \*/
p {
  background: yellow;
}

simple-custom {
  display: block;
  background: cyan;
}

/\* И пользовательский, и встроенный элементы будет отображены курсивом \*/
:defined {
  font-style: italic;
}
```

Наконец, мы добавляем следующие два правила, чтобы спрятать наш пользовательский элемент, если он не был определён или показать в обратном случае:

```css
simple-custom:not(:defined) {
  opacity: 0;
}

simple-custom:defined {
  opacity: 0.75;
  text-decoration: underline;
}
```

Это полезно, если у вас есть сложный пользовательский элемент, который требует какое-то время для загрузки — возможно, вы захотите спрятать его до определения, чтобы на странице не появились искажения или не стилизованные элементы.

### результат

Вот результат выполнения представленного выше кода:

Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-defined |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Веб-компоненты
* `:host` (en-US)
* `:host()`
* `:host-context()`


background-size - CSS: каскадные таблицы стилей

background-size
===============

Описание
--------

Значение **`background-size`** в CSS позволяет задавать размер фонового изображения. Изображение может быть оставлено в исходном размере, растянуто, или подогнано под размеры доступного пространства.

**Примечание:** Если значение этого свойства не задано в сокращённом свойстве `background`, которое применяется к элементу после CSS-свойства `background-size`, то значение этого свойства затем сбрасывается до исходного значения c помощью сокращённого свойства.

|  |  |
| --- | --- |
| Начальное значение | `auto auto` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | относительно области позиционирования фона |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | повторяющийся список из  |

Синтаксис
---------

```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;
```

### Значения

`<размер>`

Значение ``<length>`` позволяет масштабировать размер фонового изображения в заданном измерении. Отрицательный размер не допускается.

`<проценты>`

Значение ``<percentage>``, которое масштабирует фоновое изображение в соответствующем измерении до указанного процента области расположения фона, которое определяется значением `background-origin`. Область расположения фона по умолчанию является областью, содержащей содержимое поля и его отступы; область также может быть изменена на содержимое или область, содержащую границы, отступы и содержимое. Если `attachment` фона является `fixed`, область позиционирования фона вместо этого является всей областью окна браузера, не включая область, покрытую полосами прокрутки, если они присутствуют. Отрицательные проценты не допускаются.

`auto`

Значение позволяет изменять размер фонового изображения в соответствии с заданным направлением, сохраняя его пропорции.

`contain`

Масштабирует картинку так, чтобы она максимально накрыла собой весь блок. Картинка при этом не обрезается, а вписывается в блок с сохранением пропорций.

`cover`

Ключевое слово, обратное `contain`. Масштабирует изображение как можно больше c сохранением пропорций изображения (изображение не становится сплющенным). Когда изображение и контейнер имеют разные размеры, *изображение обрезается* либо влево / вправо, либо сверху / снизу.

Интерпретация возможных значений зависит от внутренних размеров изображений (ширина и высота) и внутренней пропорции (соотношение ширины и высоты). Растровое изображение всегда имеет внутренние размеры и внутреннюю пропорцию. Векторное изображение может иметь оба внутренних размера (и, следовательно, должно иметь внутреннюю пропорцию). Он также может иметь одно или не иметь внутренних размеров, и в любом случае он может иметь или не иметь внутреннюю пропорцию. Градиенты обрабатываются как изображения без внутренних размеров или внутренней пропорции.

**Предупреждение:** Это поведение изменилось в Gecko 8.0. До этого, градиенты обрабатывались как изображения без внутренних размеров, с внутренней пропорцией, идентичной пропорции области расположения фона.

Фоновые изображения, сгенерированные из элементов с использованием `-moz-element()` (en-US) (которые фактически соответствуют элементу) в настоящее время обрабатываются как изображения с размерами элемента, или как область расположения фона, если элементом является SVG, с соответствующей внутренней пропорцией.

**Предупреждение:** Это не определённое в настоящее время поведение, которое заключается в том, что внутренние размеры и пропорция должны быть такими же как у элемента во всех случаях.

Визуализированный размер фонового изображения затем вычисляется следующим способом:

Если оба атрибута в `background-size` заданы и различны от `auto`:

Фоновое изображение отображается в указанном размере.

Если `background-size` содержит `contain` или `cover`:

Изображение визуализируется с сохранением его внутренней пропорции при наибольшем размере, который содержится внутри области размещения фона или покрывает её. Если изображение не имеет внутренней пропорции, оно отображается с размером области расположения фона.

Если `background-size` установлен как `auto` или `auto auto`:

Если изображение имеет оба внутренних размера, оно отображается с таким размером. Если оно не имеет внутренних размеров и внутренней пропорции, оно отображается с размером области расположения фона. Если оно не имеет размеров, но имеет пропорцию, оно отображается так, если был был бы указан `contain`. Если изображение имеет один внутренний размер и пропорцию, оно отображается с размером, определённым этим одним размером и пропорцией. Если изображение имеет один внутренний размер, но не имеет пропорцию, оно отображается с использованием внутреннего размера и соответствующим размером области позиционирования фона.

Если background-size содержит один атрибут `auto` и один не-`auto`:

Если изображение имеет внутреннюю пропорцию, то визуализируйте его используя указанный размер, и вычислите другой размер из указанного размера и внутренней пропорции. Если изображение не имеет внутренней пропорции, используйте указанный размер для этого размера. Для другого размера, используйте соответствующее внутреннее измерение изображения, если оно есть. Если такого внутреннего размера нет, используйте соответствующий размер области расположения фона.

Обратите внимание, что изменение размера фона для векторных изображений, в которых отсутствуют внутренние размеры или пропорции, ещё не полностью реализовано во всех браузерах. Будьте осторожны, полагаясь на поведение, описанное выше, и тестируйте в нескольких браузерах (в частности, включая версии Firefox 7 или более ранней версии и Firefox 8 или более поздней версии), чтобы убедиться, что различные визуализации приемлемы.

### Формальный синтаксис
```

background-size =
  <bg-size># (en-US)

<bg-size> =
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)
  cover                                      | (en-US)
  contain

<length-percentage> =
  <length>      | (en-US)
  <percentage>

```

Примеры
-------

Эта демонстрация `background-size: cover` и эта демонстрация `background-size: contain` предназначены для открытия в новых окнах, чтобы вы могли видеть, как `contain` и `cover` ведут себя, когда размеры области расположения фона изменяются. Эта серия демонстраций, как работает `background-size` и взаимодействует с другими свойствами `background-*`, должна в значительной степени охватить оставшуюся основу в том, как использовать `background-size` отдельно и в сочетании с другими свойствами.

Замечания
---------

Если вы указываете градиент в качестве фона и указали `background-size`, который будет использоваться вместе с ним, лучше не указывать размер, который использует единственную автоматическую составную часть, или задаётся с использованием только значения ширины (для примера, `background-size: 50%`). Рендеринг градиентов в таких случаях изменился в Firefox 8, и в настоящее время он обычно несовместим во всех браузерах, которые не реализуют рендеринг в соответствии с CSS3 спецификацией `background-size` и с CSS3 спецификацией градиента значений изображения.

```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, без знания точного размера элемента, фон которого указывается.

Спецификации
------------

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-background-size |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Справочник по CSS (en-US)
* Несколько фонов (en-US)
* Масштабирование фонового изображения (en-US)


:enabled - CSS: каскадные таблицы стилей

:enabled
========

Описание
--------

CSS псевдокласс `:enabled` находит любой включённый элемент. Элемент включён, если его можно активировать (например, выбрать, нажать на него или ввести текст) или поставить фокус. У элемента также есть отключённое состояние, когда его нельзя активировать или сфокусировать.

Пример
------

Следующий пример делает цвет текста средне-зелёного оттенка, когда поле включено, и серым, когда отключено. Это позволяет понимать пользователю какие элементы интерактивны, а какие нет.

Следующий HTML...

```html
<form action="url\_of\_form">
  <label for="FirstField">Первое поле (включено):</label>
  <input type="text" id="FirstField" value="Lorem" /><br />
  <label for="SecondField">Второе поле (отключено):</label>
  <input type="text" id="SecondField" value="Ipsum" disabled="disabled" /><br />
  <input type="button" value="Submit" />
</form>
```

...используем со следующим CSS...

```css
input:enabled {
  color: #22aa22;
}
input:disabled {
  color: #d9d9d9;
}
```

...результат:

Заметьте, цвет текста кнопки также зелёный, так как она тоже включена.Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-enabled |
| Selectors Level 4 # enableddisabled |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `:disabled`


max-block-size - CSS: каскадные таблицы стилей

max-block-size
==============

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS свойство **`max-block-size`** определяет максимальный горизонтальный или вертикальный размер блока в зависимости от вида ориентации экрана. Это свойство соответствует либо `max-width`, либо `max-height`, в зависимости от значения определённого в `writing-mode`. Если последнее свойство вертикально ориентировано, значит значение свойства `max-block-size` относится к максимальной ширине блока, в противном случае относится к максимальной высоте блока. It relates to `max-inline-size` (en-US), which defines the other dimension of the element.

```css
/\* <length> values \*/
max-block-size: 300px;
max-block-size: 25em;

/\* <percentage> values \*/
max-block-size: 75%;

/\* Keyword values \*/
max-block-size: none;
max-block-size: max-content;
max-block-size: min-content;
max-block-size: fit-content;
max-block-size: fill-available;

/\* Global values \*/
max-block-size: inherit;
max-block-size: initial;
max-block-size: unset;
```

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | с такими же `width` и `height` |
| Наследуется | нет |
| Проценты | размер блока, содержащего элемент |
| Обработка значения | с такими же `max-width` и `max-height` |
| Animation type | длина, проценты или calc(); |

Syntax
------

### Values

Свойство `max-block-size` принимает такие же значения как `max-width` и `max-height` свойства.

### Formal syntax
```

max-block-size =
  <'max-width'>

```

Example
-------

### HTML Content

```html
<p class="exampleText">Example text</p>
```

### CSS Content

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  block-size: 100%;
  max-block-size: 200px;
}
```

Specification
-------------

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-max-block-size |
| CSS Box Sizing Module Level 4 # sizing-values |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* The mapped physical properties: `max-width` and `max-height`
* `writing-mode`


outline-style - CSS: каскадные таблицы стилей

outline-style
=============

CSS-свойство **`outline-style`** задаёт стиль обводки элемента. Обводка — линия вокруг элемента за пределами рамки (`border`).

Интерактивный пример
--------------------

При определении внешнего вида обводки зачастую удобнее всего воспользоваться сокращённым свойством `outline`.

Синтаксис
---------

```css
/\* Ключевые слова \*/
outline-style: auto;
outline-style: none;
outline-style: dotted;
outline-style: dashed;
outline-style: solid;
outline-style: double;
outline-style: groove;
outline-style: ridge;
outline-style: inset;
outline-style: outset;

/\* Глобальные значения \*/
outline-style: inherit;
outline-style: initial;
outline-style: revert;
outline-style: revert-layer;
outline-style: unset;
```

Свойство `outline-style` может быть иметь одно из перечисленных ниже значений.

### Значения

`auto`

Оставляет стиль обводки на усмотрение браузера.

`none`

Отсутствие обводки. Значение `outline-width` в таком случае будет `0`.

`dotted`

Обводка в виде линии из точек.

`dashed`

Обводка в виде пунктирной линии.

`solid`

Обводка в виде сплошной линии.

`double`

Обводка из двух сплошных линий. Значение `outline-width` — это сумма двух линий и расстояния между ними.

`groove`

Обводка выглядит так, словно она выгравирована на странице.

`ridge`

Противоположность `groove`: обводка полностью объёмная, словно выдавлена из страницы.

`inset`

Обводка выглядит так, словно блок погружается в страницу.

`outset`

Противоположность `inset`: обводка выглядит так, словно приподнимает блок на странице.

Формальное определение
----------------------

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | by computed value type |

Формальный синтаксис
--------------------
```

outline-style =
  auto                  | (en-US)
  <outline-line-style>

```

Примеры
-------

### с

Значение `auto` стилизует обводку согласно спецификации: "как правило, это либо стандартный стиль для данной платформы, либо что-то более разнообразное, как например, яркая обводка с закруглёнными краями".

#### HTML

```html
<div>
  <p class="auto">Демонстрация обводки</p>
</div>
```

#### CSS

```css
.auto {
  outline-style: auto; /\* То же самое, что и "outline: auto" \*/
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Результат

### Стиль обводки из линий в виде штрихов и точек

#### HTML

```html
<div>
  <div class="dotted">
    <p class="dashed">Демонстрация обводки</p>
  </div>
</div>
```

#### CSS

```css
.dotted {
  outline-style: dotted; /\* То же самое, что и "outline: dotted" \*/
}
.dashed {
  outline-style: dashed;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Результат

### Стиль обводки из сплошной и двойной линий

#### HTML

```html
<div>
  <div class="solid">
    <p class="double">Демонстрация обводки</p>
  </div>
</div>
```

#### CSS

```css
.solid {
  outline-style: solid;
}
.double {
  outline-style: double;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Результат

### Применение стилей обводки groove и ridge

#### HTML

```html
<div>
  <div class="groove">
    <p class="ridge">Демонстрация обводки</p>
  </div>
</div>
```

#### CSS

```css
.groove {
  outline-style: groove;
}
.ridge {
  outline-style: ridge;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Результат

### Применение стилей обводки inset и outset

#### HTML

```html
<div>
  <div class="inset">
    <p class="outset">Демонстрация обводки</p>
  </div>
</div>
```

#### CSS

```css
.inset {
  outline-style: inset;
}
.outset {
  outline-style: outset;
}

/\* Для большей наглядности примера \*/
\* {
  outline-width: 10px;
  padding: 15px;
}
```

#### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # outline-style |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `outline`
* `outline-color`
* `outline-width`


<percentage> - CSS: каскадные таблицы стилей

<percentage>
============

CSS тип данных **`<percentage>`** представляет значение в процентах. Оно часто используется, чтобы определить размер относительно родительского элемента. Проценты используются в различных свойствах, таких как `width`, `height`, `margin`, `padding`, и `font-size`.

**Примечание:** Наследуются рассчитанные значения. Таким образом, даже если процентное значение используется на родительском элементе, настоящее значение (такое, как пиксели для типа данных `<length>`) будет доступно в унаследованном свойстве, а не значение в процентах.

Синтаксис
---------

Тип данных `<percentage>` состоит из `<number>`, за которым следует знак процента (`%`). Так же впереди может стоять знак `+` или `-`, хотя отрицательные значения допустимы не во всех свойствах. Как и у всех единиц измерения CSS между символом процента и числом нет пробельного символа.

Интерполяция
------------

При анимировании значения типа данных `<percentage>` интерполируются как настоящие числа с плавающей запятой. Скорость интерполяции зависит от функции времени, с которой используется анимация.

Примеры
-------

### Ширина и левый отступ

```html
<div style="background-color:blue;">
  <div style="width:50%; margin-left:20%; background-color:lime;">
    Width: 50%, Left margin: 20%
  </div>
  <div style="width:30%; margin-left:60%; background-color:pink;">
    Width: 30%, Left margin: 60%
  </div>
</div>
```

HTML код выше будет выглядеть так:

### Размер шрифта

```html
<div style="font-size:18px;">
  <p>Full-size text (18px)</p>
  <p><span style="font-size:50%;">50%</span></p>
  <p><span style="font-size:200%;">200%</span></p>
</div>
```

HTML код выше будет выглядеть так:

Спецификации
------------

| Specification |
| --- |
| CSS Values and Units Module Level 4 # percentages |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


::selection - CSS: каскадные таблицы стилей

::selection
===========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

Псевдоэлемент **`::selection`** позволяет применить стили к части документа, который был выделен пользователем (например, с помощью мыши).

```css
::selection {
  background: cyan;
}
```

Разрешённые свойства
--------------------

Только небольшое подмножество CSS-свойств может быть использовано с псевдоэлементом `::selection` :

* `color` (en-US)
* `background-color`
* `cursor`
* `caret-color` (en-US)
* `outline` и его длинные записи
* `text-decoration` (en-US) и связанные свойства
* `text-emphasis-color` (en-US)
* `text-shadow`

**Предупреждение:** Заметим, что, в частности, свойство `background-image` игнорируется.

Синтаксис
---------

```css
/\* синтаксис Firefox \*/
::-moz-selection {
}
```

Error: could not find syntax for this itemПример
------

### HTML

```html
<div>Этот текст будет стилизован особым образом при выделении.</div>
<p>Также попробуйте выделить текст в этом параграфе.</p>
```

### 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;
}
```

### Результат

Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # selectordef-selection |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


display - CSS: каскадные таблицы стилей

display
=======

Свойство **`display`** (CSS) определяет *тип отображения (display type)* элемента, имеющий два основных свойства, определяющих генерацию боксов — **внешний тип отображения** определяет расположение бокса в схеме потока (flow layout) и **внутренний тип отображения** определяет расположение дочерних элементов бокса (бокс - это прямоугольная область, являющаяся изображением элемента).

Некоторые значения свойства `display` полностью определены в их индивидуальных спецификациях; смотрите таблицу в конце этого документа со ссылками на все релевантные спецификации. Полный список значений приведён ниже.

```css
/\* <display-outside> values \*/
display: block;
display: inline;
display: run-in;

/\* <display-inside> values \*/
display: flow;
display: flow-root;
display: table;
display: flex;
display: grid;
display: ruby;

/\* <display-outside> plus <display-inside> values \*/
display: block flow;
display: inline table;
display: flex run-in;

/\* <display-listitem> values \*/
display: list-item;
display: list-item block;
display: list-item inline;
display: list-item flow;
display: list-item flow-root;
display: list-item block flow;
display: list-item block flow-root;
display: flow list-item block;

/\* <display-internal> values \*/
display: table-row-group;
display: table-header-group;
display: table-footer-group;
display: table-row;
display: table-cell;
display: table-column-group;
display: table-column;
display: table-caption;
display: ruby-base;
display: ruby-text;
display: ruby-base-container;
display: ruby-text-container;

/\* <display-box> values \*/
display: contents;
display: none;

/\* <display-legacy> values \*/
display: inline-block;
display: inline-table;
display: inline-flex;
display: inline-grid;

/\* Global values \*/
display: inherit;
display: initial;
display: unset;
```

|  |  |
| --- | --- |
| Начальное значение | `inline` |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как указанное значение, кроме как для позиционированных и плавающих элементов и корневого элемента. В обоих случаях вычисляемое значение может быть ключевым словом, отличным от указанного. |
| Animation type | Discrete behavior except when animating to or from `none` is visible for the entire duration |

Синтаксис
---------

Свойство `display` задаётся с помощью ключевых слов. Ключевые слова группируются по шести категориям:

`<display-outside>`

Эти ключевые слова определяют внешний тип отображения (outer display type) элемента, который играет существенную роль в схеме потока.

`<display-inside>` (en-US)

Эти ключевые слова определяют внутренний тип отображения ( inner display type) элемента, который определяет тип контекста форматирования, в котором располагается его содержимое (при условии, что это незаменяемый элемент).

`<display-listitem>`

Создаёт блоковый бокс для контента и отдельный строковый (inline) бокс для элемента списка.

`<display-internal>` (en-US)

Некоторые модели разметки, такие как `table` и `ruby,` имеют сложную внутреннюю структуру с несколькими различными ролями, которые могут выполнять их дочерние элементы и потомки. Этот раздел определяет те "внутренние" значения отображения, которые имеют смысл только в рамках этих конкретных методов разметок.

`<display-box>` (en-US)

Эти значения определяют, генерирует ли элемент отображение боксов вообще.

`<display-legacy>` (en-US)

В CSS 2 используется синтаксис с одним ключевым словом для свойства `display`, для которого требуются отдельные ключевые слова для блокового и строкового уровней одного способа разметки.

`<display-xul>`
Non-standard

Устарело

Значения, используемые только в Firefox, в основном, для стилизации. XUL documents.

### "Наследственные" значения отображения

Спецификация уровня 3 подразумевает два значения для свойства `display` — позволяет специфицировать внешний и внутренний тип отображения явно — но это поддерживается браузерами пока недостаточно хорошо.

Методы display-legacy позволяют получать такие же результаты с одиночными значениями ключевых слов и должны поддерживаться разработчиками до тех пор, пока два значения ключевых слов не будут лучше поддерживаться. Например, используя два значения, вы можете задать строковый (inline) flex контейнер следующим образом:

```css
.container {
  display: inline flex;
}
```

В настоящее время это можно задать с помощью одного значения.

```css
.container {
  display: inline-flex;
}
```

### Формальный синтаксис
```

display =
  [ (en-US) <display-outside> || (en-US) <display-inside> ] (en-US)         | (en-US)
  <display-listitem>                                | (en-US)
  <display-internal>                                | (en-US)
  <display-box>                                     | (en-US)
  <display-legacy>                                  | (en-US)
  <display-outside> || (en-US) [ (en-US) <display-inside> | (en-US) math ] (en-US)

<display-outside> =
  block   | (en-US)
  inline  | (en-US)
  run-in

<display-inside> =
  flow       | (en-US)
  flow-root  | (en-US)
  table      | (en-US)
  flex       | (en-US)
  grid       | (en-US)
  ruby

<display-listitem> =
  <display-outside>? (en-US)     && (en-US)
  [ (en-US) flow | (en-US) flow-root ] (en-US)? (en-US)  && (en-US)
  list-item

<display-internal> =
  table-row-group      | (en-US)
  table-header-group   | (en-US)
  table-footer-group   | (en-US)
  table-row            | (en-US)
  table-cell           | (en-US)
  table-column-group   | (en-US)
  table-column         | (en-US)
  table-caption        | (en-US)
  ruby-base            | (en-US)
  ruby-text            | (en-US)
  ruby-base-container  | (en-US)
  ruby-text-container

<display-box> =
  contents  | (en-US)
  none

<display-legacy> =
  inline-block  | (en-US)
  inline-table  | (en-US)
  inline-flex   | (en-US)
  inline-grid

```

Примеры
-------

В разделе Syntax содержатся несколько примеров для разных типов значений `display`, которые это свойство может принимать.

Кроме того, вы можете найти подробные объяснения способов разметки для определённых значений `display` в других статьях на MDN:

* Разметка CSS Grid
* Разметка CSS Flexible box
* Разметка CSS (Модуль обучения для начинающих)
Доступность
-----------

### `display: none;`

Если свойство `display` принимает значение `none` на элементе, то элемент удаляется из дерева доступности. Это приводит к тому, что элемент и все его дочерние элементы больше не будут восприниматься технологиями чтения экрана.

Если вы хотите визуально скрыть элемент, более доступной альтернативой является использование комбинации свойств для визуального удаления изображения с экрана, но это сохраняет его для синтаксического анализа с помощью вспомогательных технологий, таких как считыватели экрана.

### `display: contents;`

Браузеры удаляют любой элемент со свойством `display,` имеющим значение `contents` из дерева доступности. Это приводит к тому, что элемент (но не его дочерние элементы) больше не будут восприниматься технологиями чтения экрана. Дочерние элементы становятся дочерними элементами элемента следующего уровня в DOM.

* Display: Contents Is Not a CSS Reset | Adrian Roselli
* More accessible markup with display: contents — hiddedevries.nl
### Таблицы

Если у элемента `<table>` (en-US) изменить значение свойства `display` на `block`, `grid` или `flex`, это изменит его представление в дереве доступности. Это приводит к тому, что таблица не будет объявлена должным образом с помощью технологии чтения экрана.

* Short note on what CSS display properties do to table semantics — The Paciello Group
* Hidden content for better a11y | Go Make Things
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Display Module Level 3 # the-display-properties |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* Блоковая и Inline разметка нормальном потоке (en-US)
* Formatting contexts explained (en-US)
* `visibility`, `float`, `position`
* `grid`, `flex`


:read-write - CSS: каскадные таблицы стилей

:read-write
===========

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2020.

* Learn more
* See full compatibility
* Report feedback
Описание
--------

CSS псевдокласс `:read-write` находит элементы, доступные для редактирования пользователем, такие как текстовые поля.

Пример
------

```css
input:-moz-read-write {
  background: #eee;
}
input:read-write {
  background: #eee;
}
```

Спецификации
------------

| Specification |
| --- |
| HTML Standard # selector-read-write |
| Selectors Level 4 # rw-pseudos |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* `:read-only`
* HTML атрибут `contenteditable` (en-US)


@namespace - CSS: каскадные таблицы стилей

@namespace
==========

Описание
--------

CSS @-правило `@namespace` определяет пространства имён XML, которые будут использованы в таблице стилей. Они применяются чтобы ограничить CSS селекторы только элементами принадлежащими конкретному пространству имён. Пространства имён полезны, в основном, когда идёт взаимодействие с документами содержащими множество пространств имён, такими как HTML5 со встроенным SVG, MathML или XML.

```css
@namespace url(http://www.w3.org/1999/xhtml);
@namespace svg url(http://www.w3.org/2000/svg);

/\* This matches all XHTML <a> elements, as XHTML is the default unprefixed namespace \*/
a {
}

/\* This matches all SVG <a> elements \*/
svg|a {
}

/\* This matches both XHTML and SVG <a> elements \*/
\*|a {
}
```

Любое `@namespace` правило обязано следовать всем @charset и @import правилам, а так же всем описаниям стилей в таблице стилей.

`@namespace` может быть использован для определения стандартного пространства имён для конкретной таблице стилей. Когда стандартное пространство имён определено, все селекторы (но не атрибуты селекторов, смотрите заметку ниже) применяются только к элементам в этом пространстве имён.

`@namespace` правила можно использовать для определения префиксов имён. Когда селектор имеет префикс, он будет выбирать элементы совпадающие по пространству имён и именам или атрибутам.

В HTML5 существуют сторонние элементы которые автоматически ассоциируются с соответствующими пространствами имён. Это значит, что HTML-элементы будут действовать так, как если бы они находились в пространстве имён (`http://www.w3.org/1999/xhtml`), также если они не имеют `xmlns` атрибута где-либо в документе, то такие элементы как <svg> и <math> будут ассоциироваться с их стандартными пространствами имён (`http://www.w3.org/2000/svg` and `http://www.w3.org/1998/Math/MathML`).

**Примечание:** Примечание: В XML, если префикс отличается от атрибута (Например, `xlink:href`), то атрибут не будет иметь пространства имён. Другими словами, атрибуты не могут наследовать пространство имён элемента в котором они находятся.

Синтаксис
---------

```css
/\* Default namespace \*/
@namespace url(XML-namespace-URL);
@namespace "XML-namespace-URL";

/\* Prefixed namespace \*/
@namespace prefix url(XML-namespace-URL);
@namespace prefix "XML-namespace-URL";
```

### Формальный синтаксис
```

@namespace =
  @namespace <namespace-prefix>? (en-US) [ (en-US) <string> (en-US) | (en-US) <url> ] (en-US) ;

<namespace-prefix> =
  <ident> (en-US)

<url> =
  <url()>  | (en-US)
  <src()>

<url()> =
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)
  <url-token>

<src()> =
  src( <string> (en-US) <url-modifier>\* (en-US) )

```

Спецификации
------------

| Specification |
| --- |
| CSS Namespaces Module Level 3 # declaration |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.


@document - CSS: каскадные таблицы стилей

@document
=========

**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

CSS @-правило **`@document`** ограничивает правила стиля, содержащиеся в нем, на основе URL-адреса документа. Он разработан в основном для пользовательских таблиц стилей, хотя он также может использоваться в авторских таблицах стилей.

```css
@document url("https://www.example.com/")
{
  h1 {
    color: green;
  }
}
```

Синтаксис
---------

Правило `@document` может указывать одну или несколько подходящих функций. Если какая-либо из функций применяется к данному URL-адресу, это правило вступит в силу для этого URL-адреса. Доступны следующие функции:

* `url()`, который соответствует точному URL-адресу.
* `url-prefix()`, который совпадает, если URL-адрес документа начинается с указанного значения.
* `domain()`, который совпадает, если URL-адрес документа находится в предоставленном домене (или его субдомене).
* `media-document()`,с параметром видео, изображения, плагина или всего.
* `regexp()`, который совпадает, если URL-адрес документа сопоставляется с предоставленным регулярным выражением. Выражение должно соответствовать всему URL-адресу.

Значения, предоставляемые функциям `url()`, `url-prefix()`, `domain()`, и `media-document()` могут быть необязательно заключены в одинарные или двойные кавычки. Значения, предоставляемые функции `regexp()` должны быть заключены в кавычки. .

Экранированные значения, предоставляемые функции `regexp()` также должны быть экранированы из CSS. Например, `.` (период) соответствует любому символу в регулярных выражениях. Чтобы соответствовать буквальному периоду, вам сначала нужно избежать этого, используя правила регулярных выражений (`\.`), А затем убежать от этой строки с помощью правил CSS (`\\.`).

**Примечание:** Существует версия -moz-prefixed этого свойства — `@-moz-document`. Это было ограничено использованием только в пользовательских и UA-листах в Firefox 59 в Nightly and Beta - эксперименте, предназначенном для смягчения потенциальных атак с помощью CSS-инъекций (Firefox bug 1035091).

### Формальный синтаксис

Error: could not find syntax for this itemПример
------

### CSS

```css
@document url(http://www.w3.org/),
 url-prefix(http://www.w3.org/Style/),
 domain(mozilla.org),
 media-document(video),
 regexp("https:.\*") {
  /\* CSS rules here apply to:
 - The page "http://www.w3.org/"
 - Any page whose URL begins with "http://www.w3.org/Style/"
 - Any page whose URL's host is "mozilla.org"
 or ends with ".mozilla.org"
 - Any standalone video
 - Any page whose URL starts with "https:" \*/

  /\* Make the above-mentioned pages really ugly \*/
  body {
    color: purple;
    background: yellow;
  }
}
```

Specifications
--------------

Initially in CSS Conditional Rules Module Level 3, `@document` has been postponed to Level 4.

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

See also
--------

* Per-site user style sheet rules on the www-style mailing list.


:is() (:matches(), :any()) - CSS: каскадные таблицы стилей

:is() (:matches(), :any())
==========================

Baseline Widely available
-------------------------

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2021.

* Learn more
* See full compatibility
* Report feedback
**Экспериментальная возможность:** **Это экспериментальная технология**
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации.

**Примечание:** `:matches()` был переименован в `:is()` в CSSWG issue #3258.

**`:is()`** это функция псевдокласс CSS принимающая список селекторов как аргумент, и выбирает любой элемент, который может быть выбран одним из селекторов в этом списке. Это полезно при переписи огромных селекторов в более компактную форму.

Заметьте, что в данный момент браузеры поддерживают её функциональность как `:matches()`, или даже как более старый, префиксный псевдокласс — `:any()`, включая старые версии Chrome, Firefox, и Safari. `:any()` работает точно таким же образом как и `:matches()`/`:is()`, за исключением того, что `:any()` требует постановку префиксов и не поддерживает комплексные селекторы.

```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;
}
```

Синтаксис
---------

Error: could not find syntax for this itemПримеры
-------

### Кроссбраузерный пример

```html
<header>
  <p>Это мой параграф в шапке</p>
</header>

<main>
  <ul>
    <li>
      <p>Это первый</p>
      <p>пункт списка</p>
    </li>
    <li>
      <p>Это второй</p>
      <p>пункт списка</p>
    </li>
  </ul>
</main>

<footer>
  <p>Это мой параграф в подвале</p>
</footer>
```

```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);
  });
}
```

### Упрощение списка селекторов

Псевдо-класс `: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()` особенно полезен при работе с заголовками и разделами HTML5. C тех пор как `<section>`, `<article>`, `<aside>`, и `<nav>` обычно используют вместе, без `:is()`, стилизовать их, чтобы они соответствовали друг друг, может быть не просто.

К примеру, без `:is()`, стилизовать все `<h1>` (en-US) элементы на разных уровнях может бы очень сложно:

```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;
}
```

### Как избежать аннулирования списка селекторов

В отличие от списка селекторов, псевдокласс `:is()` не аннулируется, когда из селекторов, попавший туда не поддерживается браузером.

```css
:is(:valid, :unsupported) {
  ...
}
```

Будет по прежнему определяться правильно и соответствовать `:valid` даже в браузерах, которые не поддерживают `:unsupported`, в то время как:

```css
:valid, :unsupported {
  ...
}
```

Будет проигнорировано браузерами, которые не поддерживают `:unsupported` даже если они поддерживают `:valid`.

### Разница между :is() и :where()

Разница между этими двумя, в том что `:is()` учитывает спецификацию общего селектора (он принимает специфику своего самого конкретного аргумента), в то же время `:where()` имеет значение спецификации равное 0. Это можно увидеть на примере на странице документации `:where()`.

Спецификации
------------

| Specification |
| --- |
| Selectors Level 4 # matches-pseudo |

Совместимость с браузерами
--------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Смотрите также
--------------

* `:where()`
Экспериментальная возможность
 - Like `:is()`, but with 0 specificity.
* Список селекторов
* Веб компоненты