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

::placeholder
=============

CSS псевдоэлемент **`::placeholder`** представляет собой текст placeholder (en-US) в `<input>` или `<textarea>` (en-US) элементах.

```css
::placeholder {
  color: blue;
  font-size: 1.5em;
}
```

В `::placeholder` можно использовать только те CSS-свойства, которые разрешены в псевдоэлементе `::first-line`.

**Примечание:** В большинстве браузеров по умолчанию placeholder выглядит как полупрозрачный или светло-серый текст.

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

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

### Красный текст

#### HTML

```html
<input placeholder="Введите что-нибудь!" />
```

#### CSS

```css
input::placeholder {
  color: red;
  font-size: 1.2em;
  font-style: italic;
}
```

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

### Зелёный текст

#### HTML

```html
<input placeholder="Введите что-нибудь..." />
```

#### CSS

```css
input::placeholder {
  color: green;
}
```

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

Проблемы доступности
--------------------

### Цветовой контраст

#### Контрастность

Текст placeholder обычно имеет более светлую расцветку и содержит информацию о том, какие введённые данные будут допустимы, но при этом не является текущими введёнными данными.

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

Коэффициент цветового контраста определяется путём сравнения яркости текста placeholder и цветом фона формы ввода. Чтобы соответствовать рекомендациям Web Content Accessibility Guidelines (WCAG), требуется соотношение 4.5:1 для основного текста и 3:1 для более крупного текста, например, заголовков. Крупный текст определяется как 18.66px и больше с жирным начертанием или 24px и больше с обычным начертанием.

* WebAIM: Color Contrast Checker
* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.3 | W3C Understanding WCAG 2.0

#### Использование

Текст placeholder с высоким цветовым контрастом может быть воспринят как введённые данные. Текст placeholder исчезает, когда пользователь вводит что-либо в `<input>` элемент. Эти обстоятельства могут помешать заполнить правильно форму, особенно людям с когнитивными проблемами.

Другой подход к представлению информации placeholder заключается в том, чтобы расположить её вне формы ввода в непосредственной близости от неё, а затем использовать `aria-describedby` (en-US) для программного связывания `<input>` элемента с подсказкой.

В таком случае содержимое подсказки будет доступно даже в том случае, если что-то введено в форму. Большинство скринридеров используют `aria-describedby` для чтения подсказок после того, как будет прочитан текст метки формы. Пользователь может отключить эту функцию, если дополнительная информация окажется ему ненужной.

```html
<label for="user-email">Ваш email адрес</label>
<span id="user-email-hint" class="input-hint">Пример: jane@sample.com</span>
<input
 id="user-email"
 aria-describedby="user-email-hint"
 name="email"
 type="email" />
```

* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
### Режим высокой контрастности Windows

Текст placeholder будет отображаться с теми же стилями, что и введённый пользователем текст при работе в режиме высокой контрастности Windows. Это вызовет затруднения с определением того какой текст был введён, а какой является placeholder.

* Greg Whitworth — How to use -ms-high-contrast
### Метки

Placeholder не является заменой элемента `<label>`. Без метки, которая программно связывается с формой с помощью `for` и `id` атрибутов, такие программы, как скринридеры не смогут анализировать элементы `<input>`.

* MDN Basic form hints (en-US)
* Placeholders in Form Fields Are Harmful — Nielsen Norman Group
Спецификации
------------

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # placeholder-pseudo |

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

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

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

* Псевдокласс `:placeholder-shown`, который позволяет применять стили к элементу с **активным** placeholder.
* Связанные HTML-элементы: `<input>`, `<textarea>` (en-US)
* HTML-формы


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

background-position
===================

CSS свойство **`background-position`** устанавливает начальную позицию для каждого фонового изображения. Положение относительно уровня положения, установленного `background-origin`.

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

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

```css
/\* Ключевые слова \*/
background-position: top;
background-position: bottom;
background-position: left;
background-position: right;
background-position: center;

/\* <процент> значения \*/
background-position: 25% 75%;

/\* <отрезок> значения \*/
background-position: 0 0;
background-position: 1cm 2cm;
background-position: 10ch 8em;

/\* Несколько изображений \*/
background-position:
  0 0,
  center;

/\* Значения смещения края \*/
background-position: bottom 10px right 20px;
background-position: right 3em bottom 10px;
background-position: bottom 10px right;
background-position: top right 10px;

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

Свойство `background-position` указывается в виде одного или нескольких значений `<position>`, разделённых запятыми.

### Значения

`<position>`

`<position>` (en-US). Позиция определяет координату x/y, чтобы разместить элемент относительно границ поля элемента. Она может быть определена с использованием одного и двух значений. Если используются два значения, первое значение предоставляет горизонтальную позицию, а второе представляет вертикальную позицию. Если указано только одно, второе значение считается `center`.**Синтаксис 1-значения:** значение может быть:

* Значение ключевого слова `center`, которое центрирует изображение.
* Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Оно указывает край, на который следует поместить элемент. Затем для другого измерения устанавливается значение 50%, таким образом элемент размещается в середине указанного края.
* `<length>` или `<percentage>`. Оно указывает координату X относительно левого края, с координатой Y установленной на 50%. **Синтаксис с 2-значениями:** одно из значений определяет X, а другое определяет Y. Каждое значение может быть:
    + Одно из значений ключевых слов `top`, `left`, `bottom`, `right`. Если здесь указаны `left` или `right`, то оно определяет X, а другое заданное значение определяет Y. Если даны `top` или `bottom`, то оно определяет Y, а другое значение определяет X.
* `<length>` или `<percentage>`. Если другое значение является `left` или `right`, то оно определяет Y, относительно верхнего края. Если другое значение `top` или `bottom`, то оно определяет X, относительно левого края. Если оба значения `<length>` или `<percentage>`, то первое определяет X, а второе Y.Обратите внимание,что:
    + Если одно значение `top` или `bottom`, то другое значение не может быть `top` или `bottom`.
* Если одно значение является `left` или `right`, то другое значение не может быть `left` или `right`.Это означает, например, что `top top` и `left right` являются недействительные.

### Официальный синтаксис
```

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

<bg-position> =
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) top | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) left | (en-US) center | (en-US) right | (en-US) <length-percentage> ] (en-US) [ (en-US) top | (en-US) center | (en-US) bottom | (en-US) <length-percentage> ] (en-US)  | (en-US)
  [ (en-US) center | (en-US) [ (en-US) left | (en-US) right ] (en-US) <length-percentage>? (en-US) ] (en-US) && (en-US) [ (en-US) center | (en-US) [ (en-US) top | (en-US) bottom ] (en-US) <length-percentage>? (en-US) ] (en-US)

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

```

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

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

### HTML

```html
<div class="exampleone">Example One</div>
<div class="exampletwo">Example Two</div>
<div class="examplethree">Example Three</div>
```

### CSS

```css
/\* Общий среди всех <div>-ов \*/
div {
  background-color: #ffee99;
  background-repeat: no-repeat;
  width: 300px;
  height: 80px;
  margin-bottom: 12px;
}

/\* В этих примерах используется сокращённое свойство 'background' \*/
.exampleone {
  background: url("startransparent.gif") #ffee99 2.5cm bottom no-repeat;
}
.exampletwo {
  background: url("startransparent.gif") #ffee99 3em 50% no-repeat;
}

/\* Несколько фоновых изображений: каждое изображение сопоставляется
 с соответствующей позицией, от первого указанного до последнего. \*/
.examplethree {
  background-image: url("startransparent.gif"), url("catfront.png");
  background-position:
    0px 0px,
    center;
}
```

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

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

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

|  |  |
| --- | --- |
| Начальное значение | `0% 0%` |
| Применяется к | все элементы. Это также применяется к `::first-letter` и `::first-line`. |
| Наследуется | нет |
| Проценты | относятся к размеру области позиционирования фона минус размер фонового изображения; размер - ширина горизонтальных смещений и высота вертикальных |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `background-position-x`: Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
* `background-position-y` (en-US): Список, каждый элемент которого состоит из: смещения, данного комбинацией абсолютной длины и процентов плюс ключевое слово
 |
| Animation type | повторяющийся список из  |

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

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

### Quantum CSS заметки

* В Gecko есть ошибка, означающая, что `background-position` не может быть `transitioned` между двумя значениями, содержащими разные числа значений `<position>` (en-US), для примера `background-position: 10px 10px;` and `background-position: 20px 20px, 30px 30px;` (смотрите Firefox bug 1390446). Новый параллельный CSS движок Firefox (также известный как Quantum CSS или Stylo, который планируется выпустить в Firefox 57) исправляет это.
Смотрите также
--------------

* `background-position-x`
* `background-position-y` (en-US)
* `background-position-inline`
* `background-position-block`
* Использование нескольких значений
* `transform-origin` (en-US)


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

Курсор
======

CSS-свойство `cursor` устанавливает курсор мыши, если таковой имеется, для отображения, когда указатель мыши находится над элементом.

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

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

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

```css
/\* Ключевые слова \*/
cursor: auto;
cursor: pointer;
/\* … \*/
cursor: zoom-out;

/\* Использование с обязательным резервным ключевым словом \*/
cursor: url(hand.cur), pointer;

/\* Использование URL и координат с обязательным резервным ключевым словом \*/
cursor:
  url(cursor\_1.png) 4 12,
  auto;
cursor:
  url(cursor\_2.png) 2 2,
  pointer;

/\* Использование URL с резервными URL (иногда с координатами) с обязательным резервным ключевым словом \*/
cursor:
  url(cursor\_1.svg) 4 5,
  url(cursor\_2.svg),
  /\* …, \*/ url(cursor\_n.cur) 5 5,
  progress;

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

### Значения

`<url>` Необязательный

`url()` (en-US) или разделенный запятыми список `url(), url(), …`, указывающий на файл изображения.
 В качестве запасного варианта можно указать несколько `url()` на случай, если некоторые типы изображений курсора не поддерживаются.
 Резервный вариант, отличный от URL-адреса (одно или несколько ключевых слов), должен находиться в конце резервного списка.

`<x>`, `<y>` Необязательный

Необязательные координаты X и Y, задающие указательную точку курсора.

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

`keyword`

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

Доступные ключевые слова перечислены в таблице ниже. Значения кроме `none` (что означает отсутствие курсора), являются изображением, которое будет использовано для отображения курсора. Вы можете навести указатель мыши на строки таблицы, чтобы увидеть эффект применения различных значений ключевых слов.

| Категория | Значение | Вид | Описание |
| --- | --- | --- | --- |
| Основные | `auto` |  |
 Браузер самостоятельно определяет значение курсора в зависимости от
 свойств элемента, на который наведена мышь.Например: при наведении
 на текст отобразит курсор `text`.
  |
| `default` | default.gif | Основной курсор платформы, обычно стрелочка. |
| `none` |  | Курсор не отображается. |
| Ссылки и статусы выполнения задач | `context-menu` | context-menu.png | Доступно контекстное меню. |
| `help` | help.gif | Доступна вспомогательная информация. |
| `pointer` | pointer.gif | Указатель, обозначающий ссылку, обычно указующая рука. |
| `progress` | progress.gif |
 Программа занята, но пользователь может взаимодействовать с интерфейсом
 (в отличие от `wait`).
  |
| `wait` | wait.gif | Программа занята (песочные часы). |
| Выделение | `cell` | cell.gif | Указывает на возможность выбора клетки или клеток таблицы. |
| `crosshair` | crosshair.gif | Крестик, часто используемый для обозначения выбора на битовой карте. |
| `text` | text.gif | Значок выбора текста. |
| `vertical-text` | vertical-text.gif | Значок выбора вертикального текста. |
| "Захвати и перенеси" | `alias` | alias.gif | Будет создана ссылка внутри страницы. |
| `copy` | copy.gif | Указывает на возможность копирования. |
| `move` | move.gif | Указывает на возможность перемещения объекта. |
| `no-drop` | no-drop.gif |
 Указывает на невозможность "сбрасывания" объекта.В Windows и Mac
 OSX то же самое что и `not-allowed`.
  |
| `not-allowed` | not-allowed.gif | Указатель невозможности выполнения действия. |
| Изменение размера, прокручивание (скроллинг) | `all-scroll` | all-scroll.gif |
 Указатель возможности перемещения по странице в любом направлении.в
 Windows то же самое что `move`.
  |
| `col-resize` | col-resize.gif |
 Объект может быть раздвинут/сдвинут горизонтально. Обычно две
 вертикальные черты со стрелочками в разные стороны.
  |
| `row-resize` | row-resize.gif |
 Объект может быть раздвинут/сдвинут вертикально. Две горизонтальные
 черты с вертикальными стрелочками.
  |
| `n-resize` | Example of a resize towards the top cursor |
 Грань или грани могут быть перемещены. Например
 `se-resize` используется для обозначения перемещения с
 юго-востока. В некоторых системах то же самое что двунаправленное
 изменение.
  |
| `e-resize` | Example of a resize towards the right cursor |
| `s-resize` | Example of a resize towards the bottom cursor  |
| `w-resize` | Example of a resize towards the left cursor |
| `ne-resize` | Example of a resize towards the top-right corner cursor |
| `nw-resize` | Example of a resize towards the top-left corner cursor |
| `se-resize` | Example of a resize towards the bottom-right corner cursor |
| `sw-resize` | Example of a resize towards the bottom-left corner cursor |
| `ew-resize` | 3-resize.gif | Двунаправленное изменение размера. |
| `ns-resize` | 6-resize.gif |
| `nesw-resize` | 1-resize.gif |
| `nwse-resize` | 4-resize.gif |
| Масштабирование | `zoom-in` | zoom-in.gif | Приближение или уменьшение. |
| `zoom-out` | zoom-out.gif |
| Захват | `grab` | grab.gif | Указывает на возможность схватить и переместить объект. |
| `grabbing` | grabbing.gif |

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано, но с абсолютными значениями `url` (en-US) |
| Animation type | discrete |

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

cursor =
  [ (en-US) [ (en-US) <url> | (en-US) <url-set> ] (en-US) [ (en-US) <x> <y> ] (en-US)? (en-US) ] (en-US)# (en-US)? (en-US) [ (en-US) auto | (en-US) default | (en-US) none | (en-US) context-menu | (en-US) help | (en-US) pointer | (en-US) progress | (en-US) wait | (en-US) cell | (en-US) crosshair | (en-US) text | (en-US) vertical-text | (en-US) alias | (en-US) copy | (en-US) move | (en-US) no-drop | (en-US) not-allowed | (en-US) grab | (en-US) grabbing | (en-US) e-resize | (en-US) n-resize | (en-US) ne-resize | (en-US) nw-resize | (en-US) s-resize | (en-US) se-resize | (en-US) sw-resize | (en-US) w-resize | (en-US) ew-resize | (en-US) ns-resize | (en-US) nesw-resize | (en-US) nwse-resize | (en-US) col-resize | (en-US) row-resize | (en-US) all-scroll | (en-US) zoom-in | (en-US) zoom-out ] (en-US)

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

<x> =
  x

<y> =
  y

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

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

```

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

### Задание типа курсора

```css
.foo {
  cursor: crosshair;
}

.bar {
  cursor: zoom-in;
}

/\* Использование резервного ключевого слова обязательно при использовании URL \*/
.baz {
  cursor: url("hyper.cur"), auto;
}
```

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # cursor |

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

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

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

* `pointer-events`
* `url()` (en-US) function


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

border-image-outset
===================

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

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

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

The **`border-image-outset`** property describes by what amount the *border image area* extends beyond the border box.

Portions of the border image that are rendered outside the border box as a result of this property do not cause scrolling to be triggered. These areas also don't capture or cause mouse events to occur on behalf of the bordered element.

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме внутренних табличных элементов, когда `border-collapse` (en-US):`collapse`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как указано, но с относительной длиной, конвертируемой в абсолютные длины |
| Animation type | by computed value type |

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

```css
/\* border-image-outset: sides \*/
border-image-outset: 1.5;

/\* border-image-outset: vertical horizontal \*/
border-image-outset: 1 1.2;

/\* border-image-outset: top horizontal bottom \*/
border-image-outset: 30px 2 45px;

/\* border-image-outset: top right bottom left \*/
border-image-outset: 7px 12px 14px 5px;

border-image-repeat: inherit;
```

### Значения

**Примечание:** When a value is specified as a unitless `<number>`, that value is multiplied by the corresponding computed `border-width` to determine the `border-image-outset`. Negative values are invalid.

*sides*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box in all four directions.

*horizontal*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box in both horizontal directions (left and right).

*vertical*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box in both vertical directions (top and bottom).

*top*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box past its top edge.

*bottom*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box past its bottom edge.

*right*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box past its right edge.

*left*

Is a `<length>` or a `<number>` of the amount by which the border image area extends beyond the border box past its left edge.

`inherit`

Is a keyword indicating that all four values are inherited from each parent elements' calculated value.

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

border-image-outset =
  [ (en-US) <length [0,∞]> | (en-US) <number [0,∞]> ] (en-US){1,4} (en-US)

```

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-outset |

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

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


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

::cue
=====

Псевдоэлемент CSS **`::cue`** соответствует репликам WebVTT в выбранном элементе. Он может быть использован для задания стилей титров и других реплик в медиа с VTT треками.

```css
::cue {
  color: yellow;
  font-weight: bold;
}
```

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

Правила с `::cue` в селекторе ограничены в использовании CSS-свойств следующим списком:

* `background` и его свойства
* `color` (en-US)
* `font` и его свойства
* `line-height`
* `opacity`
* `outline` и его свойства
* `ruby-position` (en-US)
* `text-combine-upright` (en-US)
* `text-decoration` (en-US) и его свойства
* `text-shadow`
* `visibility`
* `white-space`

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

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

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

Следующий CSS устанавливает стили для реплик в виде белого цвета текста и полупрозрачного чёрного фона.

```css
::cue {
  color: #fff;
  background-color: rgba(0, 0, 0, 0.6);
}
```

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

| Specification |
| --- |
| WebVTT: The Web Video Text Tracks Format # the-cue-pseudo-element |

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

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

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

* Web Video Tracks Format (WebVTT)


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

will-change
===========

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

CSS свойство `will-change` предоставляет автору возможность уведомить браузер об ожидаемом изменении элемента, таким образом браузер может настроить соответствующую оптимизацию до того как элемент действительно изменится. Такой тип оптимизации может повысить отзывчивость страницы, совершая, возможно дорогие операции до того как они действительно понадобятся.

```css
/\* Keyword values \*/
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /\* Example of <custom-ident> \*/
will-change: opacity; /\* Example of <custom-ident> \*/
will-change: left, top; /\* Example of two <animateable-feature> \*/

/\* Global values \*/
will-change: inherit;
will-change: initial;
will-change: unset;
```

Правильно использование этого свойства может быть немного сложнее:

* *Не применяйте will-change к большому числу элементов.* Браузер и так пытается изо всех сил всё оптимизировать. Некоторые тяжёлые оптимизации ссылающиеся на `will-change` используют много аппаратных мощностей, и если злоупотреблять этим, это может привести к замедлению работы страницы и потреблению большого количества ресурсов.
* *Используйте умеренно.* Обычное поведение для оптимизаций которые выполняет браузер, удалить оптимизацию как можно скорее и вернуть нормальное состояние. Но добавление `will-change` прямо в файле стилей предполагает, что указанный элемент всегда находится в нескольких шагах от изменений и браузер будет сохранять для него оптимизацию гораздо больше времени. Так что, было бы хорошо включать и отключать `will-change` используя скрипт до и после того как произошли изменения.
* *Не применяйте will-change к элементам для выполнения преждевременной оптимизации*. Если ваша страница хорошо отрабатывается, не применяйте `will-change` свойство к элементу только чтобы выжать немного больше скорости. `will-change` предназначен для использования в крайнем случае, для того чтобы исправить существующие проблемы оптимизации. Его не следует использовать для предвидения проблем оптимизации. Чрезмерное использование `will-change` приведёт к излишнему потреблению памяти и вызовет более тяжёлый рендеринг так как браузер будет пытаться подготовиться к возможным изменениям. Это приведёт к ухудшению производительности.
* *Дайте ему достаточно времени, чтобы работать*. Это свойство даёт автору способ указать пользовательскому агенту свойства, которые могут измениться в будущем. Затем браузер может применить любые предварительные оптимизации, необходимые для изменения свойств до того, когда эти свойства изменятся. Поэтому важно дать браузеру некоторое время, чтобы провести оптимизацию. Найдите способ предсказать изменение хотя бы немного заранее, что-то изменится, и затем установите изменение.

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

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

### Значения

`auto`

Это ключевое слово не выражает конкретной цели; пользовательский агент должен применяться независимо эвристики и оптимизации как он это обычно делает.

<Animateable-feature> может иметь одно из следующих значений:

`scroll-position`

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

`contents`

Указывает, что автор ожидает анимацию или изменение чего то в контенте элемента в ближайшем будущем.

`<custom-ident>`

Указывает, что автор ожидает анимацию или изменить свойства с заданным именем в элементе в ближайшем будущем . Если заданное свойство-это сокращённая запись, тогда оно указывает на все полные записи свойств, на которые указывает сокращённая запись. Это не может быть одним из следующих значений: `unset`, `initial`, `inherit`, `will-change`, `auto`, `scroll-position`, или `contents`.

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

```css
.sidebar {
  will-change: transform;
}
```

В примере выше прямо в таблицу стилей добавляется свойство `will-change`, которое заставит браузер держать оптимизацию в памяти намного дольше, чем нужно, а мы уже видели почему следует этого избегать. Ниже приведён ещё один пример, показывающий, как применить свойство `will-change` с помощью скриптов, что вероятно, вам следует делать в большинстве случаев.

```js
var el = document.getElementById("element");

// Set will-change when the element is hovered
el.addEventListener("mouseenter", hintBrowser);
el.addEventListener("animationEnd", removeHint);

function hintBrowser() {
  // The optimizable properties that are going to change
  // in the animation's keyframes block
  this.style.willChange = "transform, opacity";
}

function removeHint() {
  this.style.willChange = "auto";
}
```

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

```css
.slide {
  will-change: transform;
}
```

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

| Specification |
| --- |
| CSS Will Change Module Level 1 # will-change |

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

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


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

transition-duration
===================

Свойство **`transition-duration`** определяет продолжительность выполнения анимации. Значение по умолчанию равняется `0s`, т.е. отсутствие анимации.

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

You may specify multiple durations; each duration will be applied to the corresponding property as specified by the `transition-property` (en-US) property, which acts as a master list. If there are fewer durations specified than in the master list, the user agent repeat the list of durations. If there are more durations, the list is simply truncated to the right size. In both case the CSS declaration stays valid.

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

```css
/\* <time> values \*/
transition-duration: 6s;
transition-duration: 120ms;
transition-duration: 1s, 15s;
transition-duration: 10s, 30s, 230ms;

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

### Values

`<time>`

Is a `<time>` denoting the amount of time the transition from the old value of a property to the new value should take. A time of `0s` indicates that no transition will happen, that is the switch between the two states will be instantaneous. A negative value for the time renders the declaration invalid.

### Formal syntax
```

transition-duration =
  <time [0s,∞]># (en-US)

```

Examples
--------

`transition-duration: 0.5s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 0.5s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transformv color;
  transition-duration: 0.5s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 1s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top -webkit-transform transform color;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 1s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 2s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 2s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-duration: 4s`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
.box1 {
  transform: rotate(270deg);
  -webkit-transform: rotate(270deg);
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  -webkit-transition-duration: 4s;
  -webkit-transition-timing-function: ease-in-out;
  transition-property: width height background-color font-size left top
    transform -webkit-transform color;
  transition-duration: 4s;
  transition-timing-function: ease-in-out;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

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

| Specification |
| --- |
| CSS Transitions # transition-duration-property |

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

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

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

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

* Using CSS transitions
* `transition`
* `transition-property` (en-US)
* `transition-timing-function` (en-US)
* `transition-delay` (en-US)
* `TransitionEvent` (en-US)


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

border
======

Свойство CSS **`border`** это универсальное свойство для указания всех персональных свойств границ за раз: `border-width`, `border-style` (en-US), и `border-color` (en-US).

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

Как и во всех универсальных свойствах, любое персональное значение, которое не указанно, устанавливается в начальное значение. Обратите внимание, `border` не может быть использован для указания пользовательского значения `border-image` (en-US), но вместо этого устанавливает его в начальное значение, т.е. `none`.

```css
border: 1px;
border: 2px dotted;
border: medium dashed green;
```

**Примечание:** Рекомендуется использовать `border`, когда вы хотите установить все свойства границ одновременно. Тогда как универсальные свойства `border-width`, `border-style` (en-US), и `border-color` (en-US) принимают до четырёх значений, позволяя установить различные значения для каждого ребра, `border` принимает единственное значение для каждого свойства. И этот стиль применяется для всех четырёх границ.

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

Свойство `border` указывается используя одно или более значений `<br-width>`, `<br-style>`, и `<color>` указанных ниже.

### Значения

`<br-width>`

Толщина границ. По умолчанию `medium` если отсутствует. Больше информации `border-width`.

`<br-style>`

Стиль линии границ. По умолчанию `none` если отсутствует. Больше информации `border-style` (en-US).

`<color>`

Цвет границ. По умолчанию принимает значение свойства элементов `color` (en-US). Больше информации `border-color` (en-US).

### Обычный синтаксис
```

border =
  <line-width>  || (en-US)
  <line-style>  || (en-US)
  <color>

<line-width> =
  <length [0,∞]>  | (en-US)
  thin            | (en-US)
  medium          | (en-US)
  thick

<line-style> =
  none    | (en-US)
  hidden  | (en-US)
  dotted  | (en-US)
  dashed  | (en-US)
  solid   | (en-US)
  double  | (en-US)
  groove  | (en-US)
  ridge   | (en-US)
  inset   | (en-US)
  outset

```

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

### HTML

```html
<div class="fun-border">Look at my borders.</div>
<p>Вы можете редактировать CSS ниже для экспериментов со стилями границ!</p>
<style contenteditable>
 .fun-border {
 border: 2px solid red;
 }
</style>
```

### CSS

```css
style {
  display: block;
  border: 1px dashed black;
}
```

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

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # propdef-border |

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-top-width` (en-US): `medium`
    + `border-right-width` (en-US): `medium`
    + `border-bottom-width` (en-US): `medium`
    + `border-left-width` (en-US): `medium`
* `border-style` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-top-style` (en-US): `none`
    + `border-right-style` (en-US): `none`
    + `border-bottom-style` (en-US): `none`
    + `border-left-style` (en-US): `none`
* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-top-color` (en-US): `currentcolor`
    + `border-right-color` (en-US): `currentcolor`
    + `border-bottom-color` (en-US): `currentcolor`
    + `border-left-color` (en-US): `currentcolor`
 |
| Применяется к | все элементы. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-bottom-width` (en-US): абсолютная длина или `0`, если `border-bottom-style` (en-US) - `none` или `hidden`
    + `border-left-width` (en-US): абсолютная длина или `0`, если `border-left-style` (en-US) - `none` или `hidden`
    + `border-right-width` (en-US): абсолютная длина или `0`, если `border-right-style` (en-US) - `none` или `hidden`
    + `border-top-width` (en-US): абсолютная длина или `0`, если `border-top-style` (en-US) - `none` или `hidden`
* `border-style` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-style` (en-US): как указано
    + `border-left-style` (en-US): как указано
    + `border-right-style` (en-US): как указано
    + `border-top-style` (en-US): как указано
* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-color` (en-US): вычисленный цвет
    + `border-left-color` (en-US): вычисленный цвет
    + `border-right-color` (en-US): вычисленный цвет
    + `border-top-color` (en-US): вычисленный цвет
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `border-color` (en-US): как и у каждого из подсвойств этого свойства:
    + `border-bottom-color` (en-US): цвет
    + `border-left-color` (en-US): цвет
    + `border-right-color` (en-US): цвет
    + `border-top-color` (en-US): цвет
* `border-style` (en-US): discrete
* `border-width`: как и у каждого из подсвойств этого свойства:
    + `border-bottom-width` (en-US): длина
    + `border-left-width` (en-US): длина
    + `border-right-width` (en-US): длина
    + `border-top-width` (en-US): длина
 |

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

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

Также смотрите
--------------

* `border-radius`-related CSS properties: `border-top-left-radius` (en-US), `border-top-right-radius` (en-US), `border-bottom-right-radius` (en-US), `border-bottom-left-radius` (en-US)


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

vertical-align
==============

CSS-свойство `vertical-align` устанавливает вертикальное позиционирование строчных (inline), строчно-блочных (inline-block) элементов или ячеек таблицы (table-cell).

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

Свойство `vertical-align` может использоваться в двух контекстах:

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

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

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

```css
/\* Ключевые слова \*/
vertical-align: baseline;
vertical-align: sub;
vertical-align: super;
vertical-align: text-top;
vertical-align: text-bottom;
vertical-align: middle;
vertical-align: top;
vertical-align: bottom;

/\* Значения длины (<length>) \*/
vertical-align: 10em;
vertical-align: 4px;

/\* Процентные значения (<percentage>) \*/
vertical-align: 20%;

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

Свойство `vertical-align` задаётся одним из значений, указанных ниже.

### Значения для строчных элементов

#### Значения относительно родительского элемента

Данные значения позиционируют элемент по вертикали относительно родительского элемента:

`baseline`

Выравнивает базовую линию элемента с базовой линией родительского элемента. Базовая линия некоторых замещаемых элементов, таких как `<textarea>` (en-US), не описана в спецификации HTML, что означает, что их поведение при указании данного ключевого слова может отличаться в зависимости от браузера.

`sub`

Выравнивает базовую линию элемента с базовой линией подстрочного индекса своего родителя.

`super`

Выравнивает базовую линию элемента с базовой линией надстрочного индекса своего родителя.

`text-top`

Выравнивает верхний край элемента с верхним краем шрифта родительского элемента.

`text-bottom`

Выравнивает нижний край элемента с нижним краем шрифта родительского элемента.

`middle`

Выравнивает середину элемента с базовой линией своего родителя плюс половина от его высоты (x-height).

`<length>`

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

`<percentage>`

Выравнивает базовую линию элемента относительно базовой линии родительского элемента со смещением на указанную в процентах величину (вычисляется относительно значения свойства `line-height`). Допустимы отрицательные значения.

#### Значения относительно строки

Следующие значения позиционируют элемент по вертикали относительно всей строки:

`top`

Выравнивает верхний край элемента и его потомков с верхним краем всей строки.

`bottom`

Выравнивает нижний край элемента и его потомков с нижним краем всей строки.

Для элементов, у которых нет базовой линии, вместо неё используется нижняя граница `внешнего отступа`.

### Значения для ячеек таблицы

`baseline` (и `sub`, `super`, `text-top`, `text-bottom`, `<length>`, и `<percentage>`)

Выравнивают базовую линию ячейки с базовой линией всех остальных ячеек этой строки, которые выравнены относительно базовой линии.

`top`

Выравнивает верхнюю границу `внутреннего отступа` ячейки с верхним краем строки таблицы.

`middle`

Выравнивает внутреннее поля ячейки по центру относительно строки таблицы.

`bottom`

Выравнивает нижнюю границу `внутреннего отступа` ячейки с нижним краем строки таблицы.

Допустимы отрицательные значения.

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

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

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

vertical-align =
  [ (en-US) first | (en-US) last ] (en-US)        || (en-US)
  <'alignment-baseline'>  || (en-US)
  <'baseline-shift'>

```

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

### Основной пример

#### HTML

```html
<div>
  Изображение <img src="frame\_image.svg" alt="link" width="32" height="32" /> с
  выравниванием по умолчанию.
</div>
<div>
  Изображение
  <img class="top" src="frame\_image.svg" alt="link" width="32" height="32" /> с
  выравниванием по верхнему краю.
</div>
<div>
  Изображение
  <img class="bottom" src="frame\_image.svg" alt="link" width="32" height="32" />
  с выравниванием по нижнему краю.
</div>
<div>
  Изображение
  <img class="middle" src="frame\_image.svg" alt="link" width="32" height="32" />
  с выравниванием по центру.
</div>
```

#### CSS

```css
img.top {
  vertical-align: text-top;
}
img.bottom {
  vertical-align: text-bottom;
}
img.middle {
  vertical-align: middle;
}
```

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

### Вертикальное позиционирование строчного элемента

#### HTML

```html
<p>
top:         <img style="vertical-align: top" src="star.png" alt="star"/>
middle:      <img style="vertical-align: middle" src="star.png" alt="star"/>
bottom:      <img style="vertical-align: bottom" src="star.png" alt="star"/>
super:       <img style="vertical-align: super" src="star.png" alt="star"/>
sub:         <img style="vertical-align: sub" src="star.png" alt="star"/>
</p>

<p>
text-top:    <img style="vertical-align: text-top" src="star.png" alt="star"/>
text-bottom: <img style="vertical-align: text-bottom" src="star.png" alt="star"/>
0.2em:       <img style="vertical-align: 0.2em" src="star.png" alt="star"/>
-1em:        <img style="vertical-align: -1em" src="star.png" alt="star"/>
20%:         <img style="vertical-align: 20%" src="star.png" alt="star"/>
-100%:       <img style="vertical-align: -100%" src="star.png" alt="star"/>
</p>
```

```
#\* {
  box-sizing: border-box;
}

img {
  margin-right: 0.5em;
}

p {
  height: 3em;
  padding: 0 0.5em;
  font-family: monospace;
  text-decoration: underline overline;
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}
```

#### Result

### Вертикальное позиционирование содержимого ячейки таблицы

#### HTML

```html
<table>
  <tr>
    <td style="vertical-align: baseline">baseline</td>
    <td style="vertical-align: top">top</td>
    <td style="vertical-align: middle">middle</td>
    <td style="vertical-align: bottom">bottom</td>
    <td>
      <p>
        Существует теория, которая утверждает, что если однажды кто-нибудь
        доподлинно выяснит, что такое и для чего нужна Вселенная, она тотчас же
        исчезнет, и вместо неё появится нечто ещё более причудливое и
        необъяснимое.
      </p>
      <p>Существует и другая теория, согласно которой это уже случилось.</p>
    </td>
  </tr>
</table>
```

#### CSS

```css
table {
  margin-left: auto;
  margin-right: auto;
  width: 80%;
}

table,
th,
td {
  border: 1px solid black;
}

td {
  padding: 0.5em;
  font-family: monospace;
}
```

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

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-vertical-align |

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

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

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

* Typical use cases of Flexbox, section "Center item" (en-US)
* `line-height`, `text-align`, `margin`
* Understanding `vertical-align`, or "How (Not) To Vertically Center Content"
* Vertical-Align: All You Need To Know (CSS)


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

<length>
========

CSS тип данных `<length>` представляет единицу длины. Длина может быть использована в таких свойствах CSS как `width`, `height`, `margin`, `padding`, `border-width`, `font-size`, и `text-shadow`.

**Примечание:** Хоть значения `<percentage>` также определяют размеры и могут использоваться в некоторых свойствах, принимающих значения типа `<length>`, они не являются `<length>` значениями.

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

Тип данных `<length>` состоит из `<number>`, за которым следует одна из единиц измерения, перечисленных ниже. Как и у любых единиц измерения CSS между числом и единицей нет знака пробела. После числа `0` единица измерения необязательна.

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

### Единицы измерения

#### Относительные единицы измерения

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

##### Единицы, зависящие от шрифта

Единицы, зависящие от шрифта, определяют значение `<length>`, используя размер какого-либо символа или характеристики шрифта, который применяется к элементу или его родителю.

**Примечание:** Эти единицы, особенно `em` и `rem`, часто используются для создания адаптивных разметок, которые сохраняют вертикальную структуру страницы даже если пользователь изменяет размер шрифта.

cap
Экспериментальная возможность

Представляет высоту заглавных букв в шрифте, применённом к элементу.

ch

Представляет ширину символа "`0`" (ноль, символ Юникод U+0030) в шрифте, применённом к элементу.

em

Представляет подсчитанный размер шрифта элемента. Если используется в свойстве `font-size`, представляет *унаследованный* размер шрифта.

ex

Представляет x-height (обычно высоту буквы x) в шрифте, применённом к элементу. В шрифтах с буквой x это обычно высота букв в нижнем регистре; во многих шрифтах `1ex ≈ 0.5em`.

ic
Экспериментальная возможность

Равна используемой в шрифте ширине символа "`水`" (ККЯ, символ "вода", U+6C34).

lh
Экспериментальная возможность

Равна рассчитанному значению свойства `line-height`, переведённому в абсолютные единицы измерения.

rem

Представляет размер шрифта корневого элемента (обычно `<html>`). Когда используется в свойстве `font-size` корневого элемента, представляет значение по умолчанию (в большинстве браузеров `16px`, но настройки пользователя могут переопределить это значение).

rlh
Экспериментальная возможность

Равна рассчитанному значению свойства `line-height` корневого элемента (обычно `<html>`), переведённому в абсолютные единицы измерения. Когда используется в свойстве `font-size` корневого элемента, представляет значение по умолчанию.

##### Единицы, зависящие от размеров экрана

Эти единицы определяют значение `<length>` относительно размеров экрана, то есть видимой части документа. эти единицы недопустимы в блоках `@page`.

vh

Равна 1% высоты блока содержимого.

vw

Равна 1% ширины блока содержимого.

vi
Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания строчных элементов.

vb
Экспериментальная возможность

Равна 1% размера блока содержимого по направлению выстраивания блочных элементов.

vmin

Равна `vh` или `vw` в зависимости от того, что из них меньше.

vmax

Равна `vh` или `vw` в зависимости от того, что из них больше.

#### Абсолютные единицы измерения

Абсолютные единицы измерения представляют физические расстояния, когда известны физические свойства устройства вывода. Одна из единиц привязывается к физической единице, а все остальные к ней. Привязка делается по-разному для устройств с низким разрешением, таких как экраны, и высоким, таких как принтеры.

Для устройств с маленьким dpi (dots per inch — количество точек на дюйм) единица измерения `px` представляет физический пиксель; остальные единицы определяются относительно него. Таким образом, `1in` определяется как `96px`, что равно `72pt`. Последствием такого способа определения является то, что длины, описанные в дюймах (`in`), сантиметрах (`cm`) или миллиметрах (mm) необязательно равны одноимённым физическим единицам.

Для устройств с высоким dpi дюймы (`in`),сантиметры (`cm`) и миллиметры (`mm`) такие же, как и соответствующие физические единицы. Таким образов, единица `px` определяется относительно их (1/96 одного дюйма).

**Примечание:** Многие пользователи увеличивают стандартный размер шрифта браузера для удобства чтения. Длины, заданные абсолютными единицами могут вызвать проблемы с доступностью, так как они привязаны к физическим величинам и не масштабируются при изменении настроек. Поэтому предпочтительнее использовать относительные единицы (такие как `em` или `rem`) в свойстве `font-size`.

px

Один пиксель. Для устройств с дисплеев традиционно представляет одну точку. Тем не менее, на *принтерах* и *экранах с высоким разрешением* один пиксель CSS равен нескольким пикселям дисплея. `1px` = 1/96 от `1in`.

cm

Один сантиметр. `1cm` = `96px/2.54`.

mm

Один миллиметр. `1mm` = 1/10 от `1cm`.

Q
Экспериментальная возможность

Четверть миллиметра. `1Q` = 1/40 от `1cm`.

in

Один дюйм. `1in` = `2.54cm` = `96px`.

pc

Одна пайка. `1pc` = `12pt` = 1/6 от `1in`.

pt

Одна точка. `1pt` = 1/72 от `1in`.

mozmm
Non-standard
, удалена в Firefox 59

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

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

При анимации значения `<length>` интерполируются как реальные числа с плавающей запятой. Интерполяция происходит над рассчитанным значением. Скорость интерполяции определяется временной функцией (en-US) анимации.

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

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

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

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


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

box-shadow
==========

CSS-свойство **`box-shadow`** добавляет тень к элементу. Через запятую можно задать несколько теней. Тень описывается смещениями по оси X и Y относительно элемента, радиусом размытия и распространения, а также цветом.

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

Свойство `box-shadow` включает отбрасывание тени от границ практически любого элемента. Если для элемента с тенью задан `border-radius`, то отбрасываемая тень также будет с закруглёнными углами. Порядок наложения нескольких теней такой же, что и у текстовых теней: первая указанная тень будет поверх остальных.

Генератор теней — интерактивный инструмент, позволяющий сгенерировать значение для `box-shadow`.

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

```css
/\* Ключевые слова \*/
box-shadow: none;

/\* offset-x | offset-y | color \*/
box-shadow: 60px -16px teal;

/\* offset-x | offset-y | blur-radius | color \*/
box-shadow: 10px 5px 5px black;

/\* offset-x | offset-y | blur-radius | spread-radius | color \*/
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/\* inset | offset-x | offset-y | color \*/
box-shadow: inset 5em 1em gold;

/\* Любое количество теней через запятую \*/
box-shadow:
  3px 3px red,
  -1em 0 0.4em olive;

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

Каждая тень определяется следующим образом:

* Два, три или четыре значения длины (`<length>`).
    + Если указаны только два значения, они будут означать смещение по X (`<offset-x>`) и смещение по Y (`<offset-y>`).
    + Третье значение устанавливает радиус размытия (`<blur-radius>`).
    + Четвёртое значение задаёт радиус распространения (`<spread-radius>`).
* Необязательное ключевое слово `inset`.
* Необязательное значение цвета (`<color>`).

Для одновременного создания нескольких теней используйте список значений, разделённых запятыми.

### Значения

`inset`

 Если не указано (по умолчанию), то тень будет отбрасываться от элемента (придавая эффект выпуклости блоку).
 Наличие ключевого слова `inset` отбрасывает тень внутри элемента (создавая эффект вдавленности блока). Внутренние тени начинаются с рамок элемента (даже если они прозрачные), над фоном элемента, но не под его содержимым.

`<offset-x>` `<offset-y>`

 Есть два значения `<length>`, отвечающие за смещения тени. Значение `<offset-x>` задаёт положение тени по горизонтали. Отрицательные значения размещают тень слева от элемента. Значение `<offset-y>` определяет положение тени по вертикали. Отрицательные значения располагают тень выше элемента. См. `<length>`, чтобы узнать список допустимых единиц.
 Если смещение по обоим осям равно `0`, то тень будет отбрасываться за элементом (в таком случае при наличии значений `<blur-radius>` и/или `<spread-radius>` будет эффект размытия).

`<blur-radius>`

Это третье значение `<length>`. Чем больше это значение, тем шире и светлее будет тень. Отрицательные значения не допускаются. Если не указано (по умолчанию), используется `0` (край тени будет резким). Спецификация не определяет в точности алгоритм вычисления радиуса размытия, однако описывает его так:

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

`<spread-radius>`

Это четвёртое значение `<length>`. Положительные значения расширяют тень, отрицательные — сжимают её. Если не указано (по умолчанию)) используется `0` (тень будет такого же размера, что и сам элемент).

`<color>`

 Смотрите страницу по `<color>` для получения допустимых значений.
 Если не указано (по умолчанию), используется `currentColor`.

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

Каждая тень в списке (`none` считается за пустой список) интерполируется через значения цвета x, y, радиуса размытия и (когда это допустимо) и радиуса расширения. Для каждой тени, если обе входные тени отмечены как `inset` или ни одна из них таковой не является, то интерполированная тень будет соответствовать входным теням. Если в любой паре входных теней одна из них является внутренней ( `inset`), а другая нет, то список теней не интерполируется. Если количество теней отличается в разных списках, то более короткий список дополняется в конце тенями, цвет которых прозрачен (`transparent`), все значения длин равны `0`, и где `inset` соответствует более длинному списку.

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

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

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

box-shadow =
  <spread-shadow># (en-US)

<spread-shadow> =
  <'box-shadow-color'>? (en-US)                               && (en-US)
  [ (en-US) <'box-shadow-offset'> [ (en-US) <'box-shadow-blur'> <'box-shadow-spread'>? (en-US) ] (en-US)? (en-US) ] (en-US)  && (en-US)
  <'box-shadow-position'>? (en-US)

```

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

### Добавление трёх теней

В этом примере применяется сразу три тени: внутренняя тень, обычная внешняя отбрасываемая тень, а также тень размером 2 пикселя, имитирующая рамку (для создания рамки можно было воспользоваться `outline`).

#### HTML

```html
<blockquote>
  <q>
    Меня уколют ваши речи,<br />
    Об ваши взгляды обожгусь,<br />
    И ранит ложь сильней картечи<br />
    Но все равно я поднимусь.
  </q>
  <p>— Майя Энджелоу</p>
</blockquote>
```

#### CSS

```css
blockquote {
  padding: 20px;
  box-shadow:
    inset 0 -3em 3em rgba(0, 0, 0, 0.1),
    0 0 0 2px rgb(255, 255, 255),
    0.3em 0.3em 1em rgba(0, 0, 0, 0.3);
}
```

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

### Использование нулевых значений для смещений и радиуса размытия

Когда смещение по X (`x-offset`), смещение по Y (`y-offset`) и радиус размытия (`blur`) равны нулю, тень будет представлять собой цветной контур одинакового размера на всех сторонах блока. Тени отображаются с конца списка, поэтому первая тень накладывается поверх последующих. Когда в `border-radius` указано значение по умолчанию `0`, углы тени становятся прямыми углами. Соответственно, если указать в `border-radius` любое другое значение, углы станут закруглёнными.

Чтобы тень не перекрывала соседние элементы и не выходила за границу содержащего блока, был добавлен внешний отступ размером, равный самому большому радиусу размытия в списке теней. Тень не влияет на размеры блочной модели (en-US).

#### HTML

```html
<div><p>Привет, мир</p></div>
```

#### CSS

```css
p {
  box-shadow:
    0 0 0 2em #f4aab9,
    0 0 0 4em #66ccff;
  margin: 4em;
  padding: 1em;
}
```

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

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # box-shadow |

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

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

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

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


Указанное значение - CSS: каскадные таблицы стилей

Указанное значение
==================

**Указанное значение** CSS-свойства может устанавливаться одним из 3 следующих способов.

1. Если в таблице стилей документа указано значение свойства, которое будет использоваться. Например, если свойство `color` (en-US) устанавливается в `green`, то цвет текста соответствующего элемента становится зелёным.
2. Если в таблице стилей документа указано значение, которое может наследоваться от родительского элемента (если возможно). Например, у нас есть параграф (`<p>`) внутри `<div>`, а к `<div>` применено CSS-свойство `font` со значением "Arial", а у `<p>` не установлено свойство `font`, то он унаследует значение шрифта "Arial".
3. Если не выполняется не то, не другое, начальное значение элемента применяется из CSS спецификации.
Спецификации
------------

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

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

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


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

max-width
=========

Свойство CSS **`max-width`** устанавливает максимальную ширину элемента. Оно предотвращает используемое значение свойства `width` от становления больше, чем значение, указанное для `max-width`.

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

`max-width` перекрывает `width`, но `min-width` перекрывает `max-width`.

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

```css
/\* Ключевые слова \*/
max-width: none;
max-width: max-content;
max-width: min-content;
max-width: fit-content;
max-width: fill-available;

/\* Значения длины \*/
max-width: 3.5em;

/\* <percentage> значение \*/
max-width: 75%;

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

### Значения

`<length>`

Максимальная ширина выражается как `<length>`.

`<percentage>`

Максимальная ширина выражается как `<percentage>` от ширины родительского блока.

#### Значения-ключевые слова

`none`

Ширина не имеет максимального значения. (по умолчанию)

`max-content`
Экспериментальная возможность

Внутренняя предпочтительная ширина.

`min-content`
Экспериментальная возможность

Внутренняя минимальная ширина.

`fill-available`
Экспериментальная возможность

Ширина родительского блока минус горизонтальные `margin`, `border`, и `padding`. (Обратите внимание, что некоторые браузеры реализуют устаревшее имя для этого ключевого слова., `available`.)

`fit-content`
Экспериментальная возможность

То же что и `max-content.`

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

max-width =
  none                                      | (en-US)
  <length-percentage [0,∞]>                 | (en-US)
  min-content                               | (en-US)
  max-content                               | (en-US)
  fit-content( <length-percentage [0,∞]> )

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

```

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

В этом примере, "child" будет иметь ширину 150 пикселей или ширину "parent", в зависимости от того, что меньше:

```html
<div id="parent">
  <div id="child">
    Fusce pulvinar vestibulum eros, sed luctus ex lobortis quis.
  </div>
</div>
```

```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: 150px;
}
```

Значение `fit-content` можно использовать для установки ширины элемента на основе внутреннего размера, требуемого его содержимым:

```html
<div id="parent">
  <div id="child">Child Text</div>
</div>
```

```css
#parent {
  background: lightblue;
  width: 300px;
}

#child {
  background: gold;
  width: 100%;
  max-width: -moz-fit-content;
  max-width: -webkit-fit-content;
}
```

Проблемы доступности
--------------------

Убедитесь, что элементы с `max-width` не обрезаются и / или не закрывают другой контент, когда страница увеличена для увеличения размера текста.

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Understanding Success Criterion 1.4.4 | W3C Understanding WCAG 2.0
Спецификации
------------

| Specification |
| --- |
| CSS Box Sizing Module Level 4 # width-height-keywords |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

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

* `width`, `min-width`, `max-height`
* Блочная модель (en-US), `box-sizing`


Модель визуального форматирования - CSS: каскадные таблицы стилей

Модель визуального форматирования
=================================

*Модель визуального форматирования* CSS - это алгоритм, используемый для обработки документа и его визуального отображения. Это базовая концепция CSS. Модель визуального форматирования задаёт трансформацию каждого элемента в документе и создаёт ноль, одну или несколько боксов, согласно боксовой модели CSS. Расположение (layout) каждого бокса определяется:

* размерами бокса: точно заданными или заданными ограничениями. Если размеры не заданы, это правило игнорируется;
* типом бокса: inline, inline-level, atomic inline-level, block box;
* схемой позиционирования: normal flow, float или absolute;
* другими элементами дерева: дочерними и соседними;
* размерами и расположением окна просмотра (viewport);
* внутренними размерами содержащихся изображений;
* другой внешней информацией.

Бокс отображается относительно краёв *содержащего его блока.* Как правило, бокс определяет родительский блок для своих потомков. Однако, стоит заметить, что бокс не ограничен содержащим его блоком. Такое поведение слоёв, выходящих за пределы своих содержащих блоков, называется *переполнением* (*overflow).*

Генерация бокса
---------------

Генерация бокса - часть алгоритма модели визуального форматирования, процедура, генерирующая блоки из элементов. Различные типы боксов определяют различное поведение в контексте форматирования. Тип бокса зависит от свойства CSS `display`.

### Блочные элементы и блок-боксы

Говорят, что элемент является блочным, когда вычисленное значение его CSS-свойства `display` равно: `block`, `list-item`, или `table`. Блочный элемент визуально форматируется как блок (например, параграф), предназначенный для вертикальной компоновки (в столбик).

Каждый элемент блочного уровня участвует в контексте блочного форматирования (en-US). Каждый элемент блочного уровня генерирует как минимум один блок-бокс, названный *главным блок-боксом*. Некоторые элементы, например, такие как list-item, создают дополнительные боксы для хранения маркеров и других типографических элементов, содержащихся в list item. Большинство блочных элементов генерирует только один, главный блок-бокс.

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

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

Важно понимать, что понятие блочного элемента и понятие блочного контейнера - это разные вещи. Первое описывает, как блок будет себя вести по отношению к своему родителю и своим соседям/братьям. А второе - описывает, как блок будет взаимодействовать со своими потомками. Некоторые элементы блочного уровня, например, таблицы, не являются содержащими блоками. И наоборот, некоторые блоки-контейнеры, например, ячейки таблицы, не являются элементами блочного уровня.

Элементы блочного уровня, которые так же являются контейнерами, называются *блок-боксами*.

#### Анонимные блок-боксы

В некоторых случаях алгоритм визуального форматирования вынужден добавлять дополнительные боксы. Так как эти боксы невозможно как-то переименовать и к ним невозможно применить css-селекторы, поэтому эти боксы называют *анонимными*.

Из-за того, что к анонимным боксам невозможно применить селекторы, их невозможно изменить с помощью таблицы стилей. Это значит, что все наследуемые CSS-свойства для них будут иметь значение `inherit`, а все ненаследуемые свойства будут иметь значение `initial`.

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

### Пример 1

Возьмём следующий HTML код (со стилями по умолчанию, то есть элементы `<div>` и `<p>` имеют значение `display:block`:

```html
<div>
  Some inline text
  <p>followed by a paragraph</p>
  followed by more inline text.
</div>
```

Здесь создались два анонимных блока: один для текста перед параграфом (`Some inline text`), и второй для текста после параграфа (`followed by more inline text.`).

Выглядеть это будет так:

```html
Some inline text
followed by a paragraph
followed by more inline text.
```

В отличие от параграфа `<p>`, Web разработчик не может напрямую контролировать стили этих двух анонимных боксов. Те свойства, которые наследуются, берут своё значение от элемента `<div>`, например `color` (en-US), определяющий цвет текста. А другие значения, ненаследуемые, устанавливаются в значение `initial`. Например, у них не будет своего свойства `background-color`, он всегда будет в состоянии "прозрачный" (transparent), значении по умолчанию для этого свойства, и поэтому будет видно тот background, который установлен у элемента `<div>`. А вот для параграфа `<p>` можно установить своё свойство цвета фона. Таким образом, эти два анонимных бокса будут иметь один и тот же цвет текста.

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

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

### Пример 2

Возьмём следующий HTML код, где установим для элемента `<p>` значение `display:inline` и для элемента `<span>` значение `display:block`:

```html
<p>
  Some <em>inline</em> text <span>followed by a paragraph</span> followed by
  more inline text.
</p>
```

Создадутся два анонимных блок-бокса, один для текста перед элементом span (`Some inline text`) и один для текста после него (`followed by more inline text`), и у нас получится вот такая структура:

![](/ru/docs/Web/CSS/Visual_formatting_model/anonymous_block_box_break.png)

Выглядеть она будет так:

```html
Some inline text followed by a paragraph followed by more inline text.
```

### Элементы инлайн-уровня и инлайн-боксы

Элементы, которые называются *элементами инлайн-уровня* - это элементы, у которых вычисленное значение CSS-свойства `display` установлено в : `inline`, `inline-block` или `inline-table`. Визуально они не представляют собой какие-то отдельные блоки, но они они располагаются в одну линию с другим контентом инлайн-уровня. Например, содержание параграфа, с различным форматированием, таким как подчёркивание или картинка, состоит из элементов инлайн-уровня.

Элементы инлайн-уровня создают *боксы инлайн-уровня*, которые определены как боксы, участвующие в контексте форматирования инлайн-уровня. *Inline boxes* are both inline-level boxes and boxes, whose contents participate in their container's inline formatting context. This is the case, for example, for all non-replaced boxes with `display:inline`. Inline-level boxes, whose contents do not participate in an inline formatting context, are called *atomic inline-level boxes*. These boxes, generated by replaced inline-level elements or by elements with a calculated `display` value of `inline-block` or `inline-table`, are never split into several boxes, as is possible with inline boxes.

**Примечание:** Initially, atomic inline-level boxes were called atomic inline boxes. This was unfortunate, as they are **not** inline boxes. This was corrected in an erratum to the spec. Nevertheless, you can harmlessly read atomic inline-level box each time you meet atomic inline box in the literature, as this is only a name change.

**Примечание:** Atomic inline boxes cannot be split into several lines in an inline formatting context.

```html
<style>
 span {
 display: inline; /\* default value\*/
 }
</style>
<div style="width:20em;">
  The text in the span <span>can be split in several lines as it</span> is an
  inline box.
</div>
```

which leads to:

The text in the span can be split into several lines as it is an inline box.

```html
<style>
 span {
 display: inline-block;
 }
</style>
<div style="width:20em;">
  The text in the span <span>cannot be split in several lines as it</span> is an
  inline-block box.
</div>
```

**Примечание:** which leads to:The text in the span cannot be split into several lines as it is an inline-block box.

#### Anonymous inline boxes

As for block boxes, there are a few cases where inline boxes are created automatically by the CSS engine. These inline boxes are also anonymous as they cannot be named by selectors; they inherit the value of all inheritable properties, setting it to `initial` for all others.

The most common case where an anonymous inline box is created, is when some text is found as a direct child of a block box creating an inline formatting context. In that case, this text is included in the largest possible anonymous inline box. Also, space content, which would be removed by the behavior set in the `white-space` CSS property, does not generate anonymous inline boxes because they would end empty.

**Примечание:** Example TBD

### Other types of boxes

#### Line boxes

*Line boxes* are generated by the inline formatting context to represent a line of text. Inside a block box, a line box extends from one border of the box to the other. When there are floats, the line box starts at the rightmost border of the left floats and ends at the leftmost border of the right floats.

These boxes are technical, and Web authors do not usually have to bother with them.

#### Run-in boxes

*Run-in boxes*, defined using `display:run-in`, are boxes that are either block boxes or inline boxes, depending on the type of the following box. They can be used to create a title that runs inside its first paragraph when possible.

**Примечание:** Run-in boxes were removed from the CSS 2.1 standard, as they were insufficiently specified to allow for interoperable implementation. They may reappear in CSS3, but meanwhile, are considered *experimental*. They should not be used in production.

#### Model-induced boxes

Besides the inline and block formatting contexts, CSS specifies several additional *content models* that may be applied to elements. These additional models, used to describe specific layouts, may define additional box types:

* The table content model (en-US) may create a *table wrapper box* and a *table box*, but also specific boxes like *caption boxes*.
* The multi-column content model (en-US) may create *column boxes* between the container box and the content\*.\*
* The experimental grid, or flex-box content models, also create additional types of boxes.

#### Positioning schemes

Once boxes are generated, the CSS engine needs to position them on the layout. To do that, it uses one of the following algorithms:

* The *normal flow* - positions each box one after the other.
* The *floats* algorithm - extracts the box from the normal flow and put it to the side of the containing box.
* The *absolute positioning* scheme - positions a box within an absolute coordinate system that is established by its containing element. An absolutely positioned element can cover other elements.
### Normal flow

In the *normal flow*, boxes are laid out one after the other. In a block formatting context, they are laid out vertically; in an inline formatting context, they are laid out horizontally. The normal flow is triggered when the CSS `position` is set to the value `static` or `relative`, and if the CSS `float` is set to the value `none`.

### Example

**Примечание:** When in the normal flow, in a block formatting context, boxes are laid vertically one after the other out.

When in the normal flow, in an inline formatting context, boxes are laid horizontally one after the other out.

**Примечание:** There are two sub-cases of the normal flow: static positioning and relative positioning:

* In *static positioning*, triggered by the value `static` of the `position` property, the boxes are drawn at the exact position defined by the normal flow layout.
* In *relative* *positioning*, triggered by the value `relative` of the `position` property, the boxes are drawn with an offset defined by the `top`, `bottom`, `left` (en-US) and `right` CSS properties.

### Floats

In the *float positioning scheme*, specific boxes (called *floating boxes* or simply *floats)* are positioned at the beginning, or end of the current line. This leads to the property that text (and more generally anything within the normal flow) flows along the edge of the floating boxes, except if told differently by the `clear` CSS property.

The float positioning scheme for a box is selected, by setting the `float` CSS property on that box to a value different than `none` and `position` to `static` or `relative`. If `float` is set to `left`, the float is positioned at the beginning of the line box. If set to `right`, the float is positioned at the end of the line box. In either case, the line box is shrunk to fit alongside the float.

### Absolute positioning

In the *absolute positioning scheme*, boxes are entirely removed from the flow and don't interact with it at all. They are positioned relative to their containing block (en-US) using the `top`, `bottom`, `left` (en-US) and `right` CSS properties.

An element is absolutely positioned if the `position` is set to `absolute` or `fixed`.

With a *fixed positioned element*, the containing block is the viewport. The position of the element is absolute within the viewport. Scrolling does not change the position of the element.


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

border-image-slice
==================

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

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

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

CSS-свойство **`border-image-slice`** делит изображение указанное в `border-image-source` на девять областей: четыре угла, четыре края и середину. Это происходит путём указания 4 внутренних смещений.

![The nine slices defined by the CSS border-image shorthand or border-image-slice longhand properties](/files/3814/border-image-slice.png)Четыре значения управляют положением линий среза. If some are not specified, they are inferred from the other with the usual 4-value syntax of CSS.

The middle is not used by the border itself but is used as a background-image if the keyword `fill` is set. The keyword can be set at any position in the property (before, after or between the other values).

The `border-image-repeat`, `border-image-width`, `border-image-outset` properties define how these images will be used.

The shorthand CSS property `border-image` (en-US) may reset this property to its default value.

|  |  |
| --- | --- |
| Начальное значение | `100%` |
| Применяется к | все элементы, кроме внутренних табличных элементов, когда `border-collapse` (en-US):`collapse`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | относятся к размеру рамки изображения |
| Обработка значения | одно к четырём процентам (как указано) или абсолютной длине(ам), плюс ключевое слово `fill`, если указано |
| Animation type | by computed value type |

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

```css
/\* border-image-slice: slice \*/
border-image-slice: 30%;

/\* border-image-slice: horizontal vertical \*/
border-image-slice: 10% 30%;

/\* border-image-slice: top horizontal bottom \*/
border-image-slice: 30 30% 45;

/\* border-image-slice: top right bottom left \*/
border-image-slice: 7 12 14 5;

/\* border-image-slice: … fill \*/
/\* The fill value can be placed between any value \*/
border-image-slice: 10% fill 7 12;

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

### Значения

*slice*

Is a `<number>` or a `<percentage>` of the offset for the four slicing lines. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*horizontal*

Is a `<number>` or a `<percentage>` of the offset for the two horizontal slicing lines, the top and the bottom ones. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*vertical*

Is a `<number>` or a `<percentage>` of the offset for the two vertical slicing lines, the right and the left ones. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*top*

Is a `<number>` or a `<percentage>` of the offset for the top slicing line. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*bottom*

Is a `<number>` or a `<percentage>` of the offset for the bottom slicing line. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*right*

Is a `<number>` or a `<percentage>` of the offset for the right slicing line. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

*left*

Is a `<number>` or a `<percentage>` of the offset for the left slicing line. Note that a `<length>` value is not allowed, and therefore invalid. The `<number>` represents *pixels* for raster images and *coordinates* for vector images. Also, `<percentage>` values are relative to the height or width of the image, whichever is adequate. Negative values are invalid and values greater than the relevant size, height or width, are clamped to `100%`.

`fill`

Is a keyword whose presence forces the use of the middle image slice to be displayed over the background image, its size and height are resized like those of the top and left image slices, respectively.

`inherit`

Is a keyword indicating that all four values are inherited from their parent's element calculated value.

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

border-image-slice =
  [ (en-US) <number [0,∞]> | (en-US) <percentage [0,∞]> ] (en-US){1,4} (en-US)  && (en-US)
  fill? (en-US)

```

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

| Specification |
| --- |
| CSS Backgrounds and Borders Module Level 3 # the-border-image-slice |

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

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


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

<ratio>
=======

Тип данных CSS **`<ratio>`** используется для описания соотношений сторон (en-US) в медиавыражениях, обозначает соотношения между двумя безразмерными значениями.

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

Тип данных `<ratio>` состоит из строго положительного `<integer>`, за которым следует слеш ('/', Unicode `U+002F SOLIDUS`) и второй строго положительный `<integer>`. Пробелы до и после черты не обязательны. Первое число представляет ширину, а второе высоту.

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

### Использование в медиавыражениях

```css
@media screen and (min-aspect-ratio: 16/9) { ... }
```

### Общее соотношение сторон

|  | Ratio | Usage |
| --- | --- | --- |
|  | `4/3` | Традиционный TV-формат 20th века. |
|  | `16/9` | Современный "широкоэкранный" TV-формат. |
|  | `185/100` = `91/50` *(нецелые делимые и делители не допускаются)* | Наиболее распространённый видео-формат в 1960-х. |
|  | `239/100` *(нецелые делимые и делители не допускаются)* | "Широкоэкранный," анаморфный видео-формат. |

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

| Specification |
| --- |
| Media Queries Level 4 # values |

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

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

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

* `aspect-ratio` (en-US) медиа-функция


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

:placeholder-shown
==================

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

CSS псевдокласс **`:placeholder-shown`** представляет любой `<input>` или `<textarea>` (en-US) элемент, который отображает в данный момент текст заполнитель (плейсхолдер).

```css
/\* Выбирает любой элемент с активным плейсхолдером \*/
:placeholder-shown {
  border: 2px solid silver;
}
```

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

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

### Простой пример

#### HTML

```html
<input placeholder="Type something here!" />
```

#### CSS
```

input:-ms-input-placeholder {
  border-color: silver;
}

input:-moz-placeholder {
  border-color: silver;
}
```

```css
input {
  border: 2px solid black;
  padding: 3px;
}

input:placeholder-shown {
  border-color: silver;
}
```

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

### Переполнение текстом

На узких экранах, таких как смартфоны, ширина полей поиска и других полей формы может быть значительно сокращена. Это может привести к нежелательному обрезанию текста плейсхолдера. Часто бывает полезно изменить это поведение с помощью свойства `text-overflow` (en-US).

#### HTML

```html
<input placeholder="Enter something into this field, if you please!" />
```

#### CSS
```

input:-ms-input-placeholder {
  text-overflow: ellipsis;
}

input:-moz-placeholder {
  text-overflow: ellipsis;
}
```

```css
input:placeholder-shown {
  text-overflow: ellipsis;
}
```

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

### Цветной текст

#### HTML

```html
<input placeholder="Type something here!" />
```

#### CSS
```

input:-ms-input-placeholder {
  color: red;
  font-style: italic;
}

input:-moz-placeholder {
  color: red;
  font-style: italic;
}
```

```css
input:placeholder-shown {
  color: red;
  font-style: italic;
}
```

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

### Кастомизированное поле ввода

В следующем примере выделены поля Branch и ID с пользовательским стилем.

#### HTML

```html
<form id="test">
  <p>
    <label for="name">Enter Student Name:</label>
    <input id="name" placeholder="Student Name" />
  </p>
  <p>
    <label for="branch">Enter Student Branch:</label>
    <input id="branch" placeholder="Student Branch" />
  </p>
  <p>
    <label for="sid">Enter Student ID:</label>
    <input
 type="number"
 pattern="[0-9]{8}"
 title="8 digit ID"
 id="sid"
 class="studentid"
 placeholder="8 digit id" />
  </p>
  <input type="submit" />
</form>
```

#### CSS
```

input.studentid:-ms-input-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}

input.studentid:-moz-placeholder {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```

```css
input {
  background-color: #e8e8e8;
  color: black;
}

input.studentid:placeholder-shown {
  background-color: yellow;
  color: red;
  font-style: italic;
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # placeholder |

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

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

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

* Псевдоэлемент `::placeholder`, применяющий стили к *самому себе*.
* Связанные HTML-элементы: `<input>`, `<textarea>` (en-US)
* HTML формы


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

Постраничные носители
=====================

Свойства **Постраничных носителей** (**Paged media**) контролируют представление содержимого страницы для принтера или любого другого носителя, который делает разбивку контента на отдельные страницы. Это позволяет установить разрыв страницы, контролировать область печати, назначить разные стили для левой и правой страниц, контролировать разрывы внутри элементов. Перечень широко поддерживаемых свойств:

* `page-break-before` (en-US)
* `page-break-after` (en-US)
* `page-break-inside` (en-US)
* `orphans`
* `widows`
* `@page`


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

:last-of-type
=============

CSS псевдокласс **`:last-of-type`** находит последнего потомка с заданным тегом в списке детей родительского элемента.

```css
/\* Выбирает <p>, являющийся последним элементом
 среди элементов своего типа среди своих соседей \*/
p:last-of-type {
  color: lime;
}
```

**Примечание:** В первоначальном определении выбранный элемент должен иметь родителя. Начиная с Selectors Level 4, это не является обязательным.

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

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

### Стилизация последнего параграфа

#### HTML

```html
<h2>Заголовок</h2>
<p>Параграф 1</p>
<p>Параграф 2</p>
```

#### CSS

```css
p:last-of-type {
  color: red;
  font-style: italic;
}
```

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

### Вложенные элементы

Этот пример показывает как можно обратиться к вложенным элементам. Заметим, что в случаях когда не указано ни одного простого селектора, подразумевается универсальный селектор (`*`).

#### HTML

```html
<article>
  <div>Этот `div` первый.</div>
  <div>Этот <span>вложенный `span` является последним</span>!</div>
  <div>
    Этот <em>вложенный `em` первый</em>, а этот
    <em>вложенный `em` последний</em>!
  </div>
  <b>Этот `b` будет выбран!</b>
  <div>Это последний `div`!</div>
</article>
```

#### CSS

```css
article :last-of-type {
  background-color: pink;
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # last-of-type-pseudo |

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

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

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

* `:last-child`, `:nth-last-of-type`