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

font-size
=========

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

CSS Свойство **`font-size`** определяет размер шрифта. Это свойство также используется для вычисления размера `em`, `ex` и других относительных единиц. Подробнее: `<length>`.

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

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

```css
/\* значения в <абсолютных размерах> \*/
font-size: xx-small;
font-size: x-small;
font-size: small;
font-size: medium;
font-size: large;
font-size: x-large;
font-size: xx-large;

/\* значения в <относительных размерах> \*/
font-size: larger;
font-size: smaller;

/\* <значения длины> \*/
font-size: 12px;
font-size: 0.8em;

/\* <процентные значения> \*/
font-size: 80%;

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

Свойство `font-size` устанавливается одним из следующих способов:

* Ключевым словом из перечня абсолютных значений или относительных значений
* Как `<значение длины>` или `<процентное значение>`, по отношению к размеру родительского элемента.
### Значения

`xx-small, x-small, small, medium, large, x-large, xx-large`

Набор ключевых слов абсолютных значений, по отношению к пользовательскому размеру шрифта по умолчанию (им считается `medium` - среднее).

`larger, smaller`

Больше (larger) или меньше (smaller). Ключевые слова для относительного размера. Шрифт будет больше или меньше по отношению в размеру шрифта родительского элемента.Примерно на такое же соотношение, которое используется в ключевых словах абсолютного размера выше.

`<length>`

Положительное значение длины `<length>`. Для большинства единиц измерения, зависимых от шрифта (таких как `em` и `ex`), размер шрифта будет зависеть от размера шрифта родительских элементов.Для единиц измерения, зависимых от шрифта, которые зависят от корневых единиц (таких как `rem`), размер шрифта будет коррелироваться по отношению к шрифту, используемому корневым элементом `<html>` (root).

`<процентные значения>`

Положительное процентное `<percentage>` значение по отношению к размеру шрифта родительского элемента.

**Примечание:** Для обеспечения максимальной совместимости обычно лучше использовать значения, относящиеся к размеру шрифта пользователя по умолчанию.

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

font-size =
  <absolute-size> (en-US)            | (en-US)
  <relative-size> (en-US)            | (en-US)
  <length-percentage [0,∞]>  | (en-US)
  math

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

```

Возможные подходы
-----------------

Существуют разные способы задания размера шрифта. С помощью ключевых слов или с помощью числовых значений для размера пикселей или размера ems. Выберите подходящий метод в зависимости от потребностей конкретной веб-страницы.

### Ключевые слова

Keywords are a good way to set the size of fonts on the web. By setting a keyword font size on the body element, you can set relative font-sizing everywhere else on the page, giving you the ability to easily scale the font up or down on the entire page accordingly.

### Pixels

Setting the font size in pixel values (`px`) is a good choice when you need pixel accuracy. A px value is static. This is an OS-independent and cross-browser way of literally telling the browsers to render the letters at exactly the number of pixels in height that you specified. The results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.

Font sizing settings can also be used in combination. For example, if a parent element is set to `16px` and its child element is set to `larger`, the child element displays larger than the parent element in the page.

**Примечание:** Defining font sizes in pixel is *not accessible*, because the user cannot change the font size from the browser. (For example, users with limited vision may wish to set the font size much larger than the size chosen by a web designer.) Therefore, avoid using pixels for font sizes if you wish to create an inclusive design.

### Ems

Another way of setting the font size is with `em` values. The size of an `em` value is dynamic. When defining the `font-size` property, an em is equal to the size of the font that applies to the parent of the element in question. If you haven't set the font size anywhere on the page, then it is the browser default, which is probably 16px. So, by default 1em = 16px, and 2em = 32px. If you set a `font-size` of 20px on the body element, then 1em = 20px and 2em = 40px. Note that the value 2 is essentially a multiplier of the current em size.

In order to calculate the em equivalent for any pixel value required, you can use this formula:
```

em = desired element pixel value / parent element font-size in pixels
```

For example, suppose the font-size of the body of the page is set to 1em, with the browser standard of 1em = 16px; if the font-size you want is 12px, then you should specify 0.75em (because 12/16 = 0.75). Similarly, if you want a font size of 10px, then specify 0.625em (10/16 = 0.625); for 22px, specify 1.375em (22/16).

A popular technique to use throughout the document is to set the the font-size of the body to 62.5% (that is 62.5% of the default of 16px), which equates to 10px, or 0.625em. Now you can set the font-size for any elements using em units, with an easy-to-remember conversion, by dividing the px value by 10. This way 6px = 0.6em, 8px = 0.8em, 12px = 1.2em, 14px = 1.4em, 16px = 1.6em. For example:

```css
body {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6em; /\* 1.6em = 16px \*/
}
```

The em is a very useful unit in CSS, since it automatically adapts its length relative to the font that the reader chooses to use.

One important fact to keep in mind: em values compound. Take the following HTML and apply it with the previous CSS above:

```html
<div>
  <span>Outer <span>inner</span> outer</span>
</div>
```

The result is:

Assuming that the browser's default `font-size` is 16px, the words "outer" would be rendered at 16px, but the word "inner" would be rendered at 25.6px. This is because the inner span's `font-size` is 1.6 em which is relative to its parent's `font-size`, which is in turn relative to its parent's `font-size`. This is often called **compounding**.

### Rems

`rem` values were invented in order to sidestep the compounding problem. `rem` values are relative to the root `html` element, not the parent element. In other words, it lets you specify a font size in a relative fashion without being affected by the size of the parent, thereby eliminating compounding.

The CSS below is nearly identical to the previous example. The only exception is that the unit has been changed to `rem`.

```css
html {
  font-size: 62.5%; /\* font-size 1em = 10px on default browser settings \*/
}
span {
  font-size: 1.6rem;
}
```

Then we apply this CSS to the same HTML, which looks like this:

```html
<span>Outer <span>inner</span> outer</span>
```

In this example, the words "outer inner outer" are all displayed at 16px (assuming that the browser's font-size has been left at the default value of 16px).

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

### Пример 1

```css
/\* Set paragraph text to be very large. \*/
p {
  font-size: xx-large;
}

/\* Set h1 (level 1 heading) text to be 2.5 times the size
 \* of the text around it. \*/
h1 {
  font-size: 250%;
}

/\* Sets text enclosed within span tag to be 16px \*/
span {
  font-size: 16px;
}
```

### Пример 2

```css
.small {
  font-size: xx-small;
}
.larger {
  font-size: larger;
}
.point {
  font-size: 24pt;
}
.percent {
  font-size: 200%;
}
```

```html
<h1 class="small">Small H1</h1>
<h1 class="larger">Larger H1</h1>
<h1 class="point">24 point H1</h1>
<h1 class="percent">200% H1</h1>
```

#### Live Sample

Примечание
----------

`em` and `ex` units on the `font-size` property are relative to the parent element's font size (unlike all other properties, where they're relative to the font size on the element). This means `em` units and percentages do the same thing for `font-size`.

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

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

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

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


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

transform
=========

CSS-свойство **`transform`** позволяет вам поворачивать, масштабировать, наклонять или сдвигать элемент. Оно модифицирует координатное пространство для CSS визуальной форматируемой модели.

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

Если свойство имеет значение, отличное от `none`, будет создан контекст наложения. В этом случае, элемент будет действовать как содержащий блок для любых элементов `position: fixed;` или `position: absolute;` которые он содержит.

**Предупреждение:** Только трансформируемый элемент может быть `transform`. Т.е. все элементы, шаблоны которых регулируются блочной моделью CSS, кроме : неизменяемые инлайновые блоки, блоки таблица-колонка, и блоки таблица-колонка-группа (en-US).

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

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

/\* Значения функций \*/
transform: matrix(1, 2, 3, 4, 5, 6);
transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
transform: perspective(17px);
transform: rotate(0.5turn);
transform: rotate3d(1, 2, 3, 10deg);
transform: rotateX(10deg);
transform: rotateY(10deg);
transform: rotateZ(10deg);
transform: translate(12px, 50%);
transform: translate3d(12px, 50%, 3em);
transform: translateX(2em);
transform: translateY(3in);
transform: translateZ(2px);
transform: scale(2, 0.5);
transform: scale3d(2.5, 1.2, 0.3);
transform: scaleX(2);
transform: scaleY(0.5);
transform: scaleZ(0.3);
transform: skew(30deg, 20deg);
transform: skewX(30deg);
transform: skewY(1.07rad);

/\* Мультифункциональные значения \*/
transform: translateX(10px) rotate(10deg) translateY(5px);
transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg);

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

Свойство `transform` может быть указано как значение ключевого слова `none` или как одно или более значений `<transform-function>`.

### Значения

`<transform-function>` (en-US)

Одна или более применяемых функций CSS-трансформации (en-US). Функции трансформации умножаются в порядке слева направо, что означает, что составное трансформирование эффективнее применять в порядке справа налево.

`none`

Указывает, что трансформация не должна применяться.

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

transform =
  none              | (en-US)
  <transform-list>

<transform-list> =
  <transform-function> (en-US)+ (en-US)

```

Если `perspective()` (en-US) является одним из мультифункциональных значений, оно должно быть указано первым.

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

### HTML

```html
<div>Transformed element</div>
```

### CSS

```css
div {
  border: solid red;
  transform: translate(30px, 20px) rotate(20deg);
  width: 140px;
  height: 60px;
}
```

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

Для того, чтобы посмотреть другие примеры, обратитесь к Использование CSS-трансформации (en-US) и `<transform-function>` (en-US).

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

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

Кроме того, рассмотрите возможность использования @media-опции `prefers-reduced-motion` — используйте её для написания `медиавыражения`, которое отключит анимацию, если пользователь уменьшил анимацию в системных настройках.

Узнать больше:

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-functions |
| CSS Transforms Module Level 1 # transform-property |

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

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

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

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

* Использование CSS-трансформации (en-US)
* `<transform-function>` (en-US) типы данных
* Плагин jQuery для кросс-браузерной 2D-трансформации


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

margin-bottom
=============

Свойство CSS **`margin-bottom`** устанавливает внешний отступ внизу элемента. Положительное значение увеличивает расстояние между соседними элементами, тогда как отрицательное - сокращает.

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

![Влияние CSS-свойства margin-bottom на блок элемента](/ru/docs/Web/CSS/margin-bottom/margin-bottomru.png)

Это свойство не имеет воздействия на незамещаемые элементы, такие как `<span>` или `<code>`.

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

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

/\* Числовые значения \*/
margin-bottom: 10px; /\* Абсолютная длина \*/
margin-bottom: 1em; /\* относительно размера текста \*/
margin-bottom: 5%; /\* относительно длины родительского блока \*/

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

Свойство `margin-bottom` может быть выражено как ключевое слово `auto`, или как `<число>`, или как `<процент>`. Значение может быть положительным, нулевым или отрицательным.

### Значения

`<length>`

Размер отступа - фиксированная величина.

`<percentage>`

Размер отступа в процентах - размер относительно длины родительского блока.

`auto`

Браузер сам выбирает, какое значение использовать. Смотрите `margin`.

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

margin-bottom =
  <length-percentage>  | (en-US)
  auto

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

```

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

### HTML

```html
<div class="container">
  <div class="box0">Блок 0</div>
  <div class="box1">Блок 1</div>
  <div class="box2">Отрицательное значение margin Блока 1 тянет меня вверх</div>
</div>
```

### CSS

CSS устанавливает нижний отступ и высоту для элементов `div`.

```css
.box0 {
  margin-bottom: 1em;
  height: 3em;
}
.box1 {
  margin-bottom: -1.5em;
  height: 4em;
}
.box2 {
  border: 1px dashed black;
  border-width: 1px 0;
  margin-bottom: 2em;
}
```

Несколько дополнений к свойствам элемента `div` и элемента класса container сделают более наглядным эффект использования свойства `margin`.

```css
.container {
  background-color: orange;
  width: 320px;
  border: 1px solid black;
}
div {
  width: 320px;
  background-color: gold;
}
```

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

| Specification |
| --- |
| CSS Box Model Module Level 3 # margin-physical |

|  |  |
| --- | --- |
| Начальное значение | `0` |
| Применяется к | все элементы, кроме элементов с табличным типом `display`, отличным от `table-caption`, `table` и `inline-table`. Это также применяется к `::first-letter`. |
| Наследуется | нет |
| Проценты | ссылается на ширину содержащего блока |
| Обработка значения | процент, как указан, или абсолютная длина |
| Animation type | длина |

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

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


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

:nth-last-child
===============

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

CSS псевдокласс `:nth-last-child(an+b)` находит элемент, имеющий `an+b-1` потомков после данной позиции в дереве документа, значение для `n` может быть положительным или нулевым, а также имеющий родительский элемент.

В результате, он функционирует так же, как и `:nth-child`, кроме того, что выбирает элементы, считая в обратном порядке, с **конца** списка потомков, не с начала.

Смотрите `:nth-child` для более тщательного описания синтаксиса его аргументов.

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

element:nth-last-child(an + b) { стили }
```

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

### Пример селекторов

`tr:nth-last-child(-n+4)`

Находит последние 4 строки HTML таблицы.

`span:nth-last-child(even)`

Ищет чётные элементы в родительском элементе, начиная с последнего элемента и работая задом наперёд.

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

Этот CSS ...

```css
table {
  border: 1px solid blue;
}
tr:nth-last-child(-n + 3) {
  /\* последние 3 потомка \*/
  background-color: lime;
}
```

... с этим HTML ...

```html
<table>
  <tbody>
    <tr>
      <td>Первая</td>
    </tr>
    <tr>
      <td>Вторая строка</td>
    </tr>
    <tr>
      <td>Третья</td>
    </tr>
    <tr>
      <td>Четвёртая</td>
    </tr>
    <tr>
      <td>Пятая строчка</td>
    </tr>
  </tbody>
</table>
```

... будет выглядеть, как :

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

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

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

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

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

* `:nth-child`


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

Кастомные свойства (--\*): CSS переменные
=========================================

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

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

* Learn more
* See full compatibility
* Report feedback
Имена свойств с префиксом `--`, например `--example-name`, представляют собой *кастомные свойства*, содержащие значения, которые можно переиспользовать в прочих декларациях, при помощи функции (`var()`).

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

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

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

```css
--somekeyword: left;
--somecolor: #0000ff;
--somecomplexvalue: 3px 6px rgb(20, 32, 54);
```

`<declaration-value>`

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

**Примечание:** Имена кастомных свойств чувствительны к регистру — таким образом `--my-color` и `--My-color` будут определены, как два различных кастомных свойства.

### Синтаксис

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

### HTML

```html
<p id="firstParagraph">Этот параграф должен иметь синий фон и жёлтый текст.</p>
<p id="secondParagraph">Этот параграф должен иметь жёлтый фон и синий текст.</p>
<div id="container">
  <p id="thirdParagraph">
    Этот параграф должен иметь зелёный фон и жёлтый текст.
  </p>
</div>
```

### CSS

```css
:root {
  --first-color: #16f;
  --second-color: #ff7;
}

#firstParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}

#secondParagraph {
  background-color: var(--second-color);
  color: var(--first-color);
}

#container {
  --first-color: #290;
}

#thirdParagraph {
  background-color: var(--first-color);
  color: var(--second-color);
}
```

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

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

| Specification |
| --- |
| CSS Custom Properties for Cascading Variables Module Level 1 # defining-variables |

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

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

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

* Использование переменных в CSS
* Функция `var()`


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

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

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

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

Значение этого свойства отменяется любой декларацией `background` или коротким свойством `background-position` применёнными после его объявления.

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

```css
/\* Keyword values \*/
background-position-x: left;
background-position-x: center;
background-position-x: right;

/\* <percentage> values \*/
background-position-x: 25%;

/\* <length> values \*/
background-position-x: 0px;
background-position-x: 1cm;
background-position-x: 8em;

/\* Side-relative values \*/
background-position-x: right 3px;
background-position-x: left 25%;

/\* Multiple values \*/
background-position-x: 0px, center;

/\* Global values \*/
background-position-x: inherit;
background-position-x: initial;
background-position-x: unset;
```

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

### Значения

`left`

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

`center`

Выравнивает центр фонового изображения по центру фонового позиционирующего слоя.

`right`

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

`<length>`

Смещение левого вертикального края данного фонового изображения от левого вертикального края фонового слоя. (Некоторые браузеры позволяют назначать правый край для смещения).

`<percentage>`

Смещение горизонтальной позиции заданного фонового изображения относительно контейнера. Значение 0% означает, что левый край фонового изображения выровнен с левым краем контейнера, а значение 100% означает, что правый край фонового изображения выровнен с правым краем контейнера, таким образом значение 50% горизонтально центрирует фоновое изображение.

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

background-position-x =
  [ (en-US) center | (en-US) [ (en-US) [ (en-US) left | (en-US) right | (en-US) x-start | (en-US) x-end ] (en-US)? (en-US) <length-percentage>? (en-US) ]! ] (en-US)# (en-US)

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

```

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

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

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

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

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

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

* `background-position`
* `background-position-y` (en-US)
* `background-position-inline`
* `background-position-block`
* Использование множественных фонов (en-US)


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

@media
======

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

CSS @-правило **`@media`** может быть использовано для применения части стилей при соблюдении условия одного или нескольких медиавыражений.

**Примечание:** В JavaScript правила, созданные с помощью `@media` могут быть получены через интерфейс объектной модели CSS `CSSMediaRule` (en-US).

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

@-правило `@media` можно разместить на верхнем уровне CSS или внутри любого фрагмента условной группы @-правил.

```css
/\* На верхнем уровне кода \*/
@media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

/\* Вложено в другое условное @-правило \*/
@supports (display: flex) {
  @media screen and (min-width: 900px) {
    article {
      display: flex;
    }
  }
}
```

Для рассмотрения синтаксиса медиавыражений, см. Использование медиавыражений.

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

@media =
  @media <media-query-list> { <rule-list> }

```

A `<media-query>` is composed of a optional media type and/or a number of media features.

Типы
----

all

Подходит для всех устройств.

print

Intended for paged material and for documents viewed on screen in print preview mode. Please consult the section on paged media, and the media section of the Getting Started tutorial for information about formatting issues that are specific to paged media.

screen

Предназначен в первую очередь для цветных компьютерных экранов.

speech

Предназначен для синтезаторов речи.

**Примечание:** CSS2.1 и Media Queries 3 определили несколько дополнительных значений (`tty`, `tv`, `projection`, `handheld`, `braille`, `embossed`, `aural`), но они устарели в Media Queries 4 и не рекомендуется к использованию.

Media Features
--------------

Each *media feature* tests for one specific feature of the browser or device.

| Имя | Summary | Notes |
| --- | --- | --- |
| `width` (en-US) | Viewport width |  |
| `height` (en-US) | Viewport height |  |
| `aspect-ratio` (en-US) | Width-to-height aspect ratio of the viewport |  |
| `orientation` | Orientation of the viewport |  |
| `resolution` (en-US) | Pixel density of the output device |  |
| `scan` | Scanning process of the output device |  |
| `grid` (en-US) | Is the device a grid or bitmap? |  |
| `update-frequency` (en-US) | How quickly (if at all) can the output device modify the appearance of the content | Added in Media Queries Level 4 |
| `overflow-block` (en-US) | How does the output device handle content that overflows the viewport along the block axis? | Added in Media Queries Level 4 |
| `overflow-inline` (en-US) | Can content that overflows the viewport along the inline axis be scrolled? | Added in Media Queries Level 4 |
| `color` (en-US) | Number of bits per color component of the output device, or zero if the device isn't color. |  |
| `color-index` (en-US) | Number of entries in the output device's color lookup table, or zero if the device does not use such a table. |  |
| `display-mode` (en-US) | The display mode of the application, as specified in the web app manifest's display member. | Defined in the Web App Manifest spec. |
| `monochrome` (en-US) | Bits per pixel in the output device's monochrome frame buffer, or 0 if the device is not monochrome. |  |
| `inverted-colors` | Is the user agent or underlying OS inverting colors? | Added in Media Queries Level 4 |
| `pointer` (en-US) | Is the primary input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 |
| `hover` (en-US) | Does the primary input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 |
| `any-pointer` (en-US) | Is any available input mechanism a pointing device, and if so, how accurate is it? | Added in Media Queries Level 4 |
| `any-hover` (en-US) | Does any available input mechanism allow the user to hover over elements? | Added in Media Queries Level 4 |
| `light-level` | Current ambient light level | Added in Media Queries Level 4 |
| `scripting` | Is scripting (e.g. JavaScript) available? | Added in Media Queries Level 4 |
| `device-width` (en-US) | Width of the rendering surface of the output device | Deprecated in Media Queries Level 4 |
| `device-height` (en-US) | Height of the rendering surface of the output device | Deprecated in Media Queries Level 4 |
| `device-aspect-ratio` (en-US) | Width-to-height aspect ratio of the output device | Deprecated in Media Queries Level 4 |
| `-webkit-device-pixel-ratio` (en-US)
Non-standard
 | Number of physical device pixels per CSS pixel | Nonstandard; WebKit/Blink-specific. If possible, use the `resolution` (en-US) media feature instead. |
| `-webkit-transform-3d` (en-US)
Non-standard
 | Are CSS 3D `transform`s supported? | Nonstandard; WebKit/Blink-specific |
| `-webkit-transform-2d` (en-US)
Non-standard
 | Are CSS 2D `transform`s supported? | Nonstandard; WebKit-specific |
| `-webkit-transition` (en-US)
Non-standard
 | Are CSS `transition`s supported? | Nonstandard; WebKit-specific |
| `-webkit-animation` (en-US)
Non-standard
 | Are CSS `animation`s supported? | Nonstandard; WebKit-specific |

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

```css
@media print {
  body {
    font-size: 10pt;
  }
}
@media screen {
  body {
    font-size: 13px;
  }
}
@media screen, print {
  body {
    line-height: 1.2;
  }
}
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) {
  body {
    line-height: 1.4;
  }
}
```

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

| Specification |
| --- |
| Media Queries Level 4 # media-descriptor-table |
| CSS Conditional Rules Module Level 3 # at-media |

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

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

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

* Media queries
* The CSSOM `CSSMediaRule` (en-US) associated with this at-rule.


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

letter-spacing
==============

Свойство **`letter-spacing`** определяет межбуквенное расстояние в тексте.

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

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

```css
/\* Ключевые слова \*/
letter-spacing: normal;

/\* Значения <length> \*/
letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: 0.3px;

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

### Значения

`normal`

Стандартное межбуквенное расстояние для текущего шрифта. В отличие от значения `0`, это ключевое слово позволяет агенту пользователя изменить расстояние между буквами для выравнивания текста.

`<length>`

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

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

letter-spacing =
  normal    | (en-US)
  <length>

```

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

### HTML

```html
<p class="normal">letter spacing</p>
<p class="em-wide">letter spacing</p>
<p class="em-wider">letter spacing</p>
<p class="em-tight">letter spacing</p>
<p class="px-wide">letter spacing</p>
```

### CSS

```css
.normal {
  letter-spacing: normal;
}
.em-wide {
  letter-spacing: 0.4em;
}
.em-wider {
  letter-spacing: 1em;
}
.em-tight {
  letter-spacing: -0.05em;
}
.px-wide {
  letter-spacing: 6px;
}
```

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

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

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

Межбуквенное расстояние должно быть определено индивидуально для каждого случая, так как в разных семействах шрифтов ширина символов различна. Нет какого-то универсального значения, которое может быть применено для наилучшего отображения во всех семействах шрифтов.

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

| Specification |
| --- |
| CSS Text Module Level 3 # letter-spacing-property |

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

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

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

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

* `font-kerning` (en-US)


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

inline-size
===========

Свойство CSS **`inline-size`** определяет горизонтальные или вертикальные размеры блока в зависимости от режима написания (writing mode). Оно соответствует свойствам `width` и `height` и зависит от свойства `writing-mode`.

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

Syntax
------

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

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

/\* Keyword values \*/
inline-size: max-content;
inline-size: min-content;
inline-size: fit-content(20em);
inline-size: auto;

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

Если режим написания (writing mode) — вертикальный, значение `inline-size` относится к высоте элемента; в противном случае, оно относиться к ширине элемента. Связанное свойство — `block-size`, которое определяет другие размеры элемента.

### Значения

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

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

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

Formal syntax
-------------
```

inline-size =
  <'width'>

```

Examples
--------

### Setting inline size in pixels

#### HTML

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

#### CSS

```css
.exampleText {
  writing-mode: vertical-rl;
  background-color: yellow;
  inline-size: 110px;
}
```

#### Result

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

See also
--------

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


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

overflow
========

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

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

* Learn more
* See full compatibility
* Report feedback
Резюме
------

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

Использование свойства `overflow` со значениями, отличными от `visible`, (значение, принятое по умолчанию), создаёт новый блочный контекст форматирования (en-US). Это технически необходимо, поскольку если бы float пересекался с элементом прокрутки, это потребовало бы обеспечить обтекание содержимого прокручиваемого элемента вокруг вторгающихся float'ов. Обтекание при этом было бы необходимо производить после каждого шага прокрутки заново, что привело бы к заметному замедлению прокрутки. Обратите внимание, что при программной установке атрибута `scrollTop` для соответствующего HTML-элемента, даже если `overflow` имеет значение `hidden`, элемент, возможно, придётся прокрутить.

|  |  |
| --- | --- |
| Начальное значение | `visible` |
| Применяется к | Block-containers, flex containers, and grid containers |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `overflow-x` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
* `overflow-y` (en-US): as specified, except with `visible`/`clip` computing to `auto`/`hidden` respectively if one of `overflow-x` (en-US) or `overflow-y` (en-US) is neither `visible` nor clip
 |
| Animation type | discrete |

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

Формат синтаксиса (en-US):
```

overflow =
  <'overflow-block'>{1,2} (en-US)

```

```css
overflow: visible
overflow: hidden
overflow: scroll
overflow: auto

overflow: inherit
```

### Значения

`visible`

По умолчанию. Содержимое не обрезается, может отображаться снаружи блока, в котором оно расположено.

`hidden`

Контент обрезается, без предоставления прокрутки.

`scroll`

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

`auto`

Зависит от агента пользователя. Браузеры такие как Firefox предоставляют прокрутку, если содержимое переполняет блок.

#### Расширения Mozilla

`-moz-scrollbars-none`

Используйте `overflow:hidden`.

`-moz-scrollbars-horizontal`
Устарело

Использование `overflow-x` (en-US) и `overflow-y` (en-US) предпочтительнее.

`-moz-scrollbars-vertical`
Устарело

Использование `overflow-x` (en-US) и `overflow-y` (en-US) предпочтительнее.

-moz-hidden-unscrollable
Non-standard

Главным образом предназначен для внутреннего использования и для тем. Отключает прокрутку XML root элементов и `<html>`, `<body>` клавишами со стрелками и колесом мыши.

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

```css
p {
  width: 12em;
  height: 6em;
  border: dotted;
  overflow: visible; /\* содержимое не обрезается \*/
}
```

`visible` (default)
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: hidden; /\* полосы прокрутки не предоставляются \*/
}
```

`overflow: hidden`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: scroll; /\* всегда показывать полосы прокрутки \*/
}
```

`overflow: scroll`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

```css
p {
  overflow: auto; /\* добавить полосы прокрутки, если это необходимо \*/
}
```

`overflow: auto`
 Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

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

| Specification |
| --- |
| CSS Overflow Module Level 3 # propdef-overflow |

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

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

### Firefox (Gecko) Примечания

Из-за Firefox 3.6 (Gecko 1.9.2), `свойство overflow неверно применяется к элементам` table-group (`<thead>` , `<tbody>` , `<tfoot>`). Это поведение будет исправлено в следующих версиях.

### Internet Explorer Примечания

Internet Explorer 4 - 6 увеличивает элемент с `overflow:visible` (значение по умолчанию), чтобы заполнить содержимое в нём. `height/width` действуют подобно `min-height/min-width`.

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

* Связанные свойства CSS: `text-overflow` (en-US), `white-space`, `overflow-x` (en-US), `overflow-y` (en-US), `overflow-inline` (en-US), `overflow-block`, `clip` (en-US), `display`


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

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

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

Свойство **`block-size`** CSS задаёт горизонтальный и вертикальный размер блока элемента, в зависимости от режима его записи (writing mode). Оно соответствует свойствам `width` и `height` и зависит от значения свойства `writing-mode`.

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

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

/\* Keyword values \*/
block-size: 25em border-box;
block-size: 75% content-box;
block-size: max-content;
block-size: min-content;
block-size: available;
block-size: fit-content;
block-size: auto;

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

Если режим записи (writing mode) ориентирован по вертикали, то значение `block-size относится к ширине элемента; в противном случае это относится к высоте элемента. С данным свойством связано свойство `inline-size`, которое задаёт другое измерение элемента.`

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

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

### Значения

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

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

block-size =
  <'width'>

```

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

### HTML

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

### CSS

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

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # dimension-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

* Отображаемые физические свойства: `width` and `height`
* `writing-mode`


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

white-space
===========

Свойство **`white-space`** управляет тем, как обрабатываются пробельные символы внутри элемента.Интерактивный пример
--------------------

**Примечание:** Для управления переносами *внутри слов* используйте `overflow-wrap`, `word-break` или `hyphens`.

Сводка
------

```css
/\* Ключевые слова \*/
white-space: normal;
white-space: nowrap;
white-space: pre;
white-space: pre-wrap;
white-space: pre-line;
white-space: break-spaces;

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

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

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

Свойство `white-space` определяется, как одно ключевое слово, выбранное из списка значений, указанных ниже.

### Значения

`normal`

Последовательности пробелов объединяются в один пробел. Символы новой строки в источнике обрабатываются, как отдельный пробел. Применение данного значения при необходимости разбивает строки для того, чтобы заполнить строчные боксы.

`nowrap`

Объединяет последовательности пробелов в один пробел, как значение `normal`, но не переносит строки (оборачивание текста) внутри текста.

`pre`

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы `<br>`.

`pre-wrap`

Последовательности пробелов сохраняются так, как они указаны в источнике. Строки переносятся только там, где в источнике указаны символы новой строки и там, где в источнике указаны элементы `<br>`, и при необходимости для заполнения строчных боксов.

`pre-line`

Последовательности пробелов объединяются в один пробел. Строки разбиваются по символам новой строки, по элементам `<br>`, и при необходимости для заполнения строчных боксов..

`break-spaces`

Поведение идентично `pre-wrap` со следующими отличиями:

* Последовательности пробелов сохраняются так, как они указаны в источнике, включая пробелы на концах строк.
* Строки переносятся по любым пробелам, в том числе в середине последовательности пробелов.
* Пробелы занимают место и не висят на концах строк, а значит влияют на внутренние размеры (min-content и max-content).

В приведённой ниже таблице указано поведение различных значений свойства `white-space`:

|  | Новые строки | Пробелы и табуляция | Перенос текста по словам | Пробелы в конце строки |
| --- | --- | --- | --- | --- |
| `normal` | Объединяются в одну | Объединяются в один пробел | Переносится | Удаляются |
| `nowrap` | Объединяются в одну | Объединяются в один пробел | Не переносится | Удаляются |
| `pre` | Сохраняются как в источнике | Сохраняются как в источнике | Не переносится | Сохраняются как в источнике |
| `pre-wrap` | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Висят |
| `pre-line` | Сохраняются как в источнике | Объединяются в один пробел | Переносится | Удаляются |
| `break-spaces` | Сохраняются как в источнике | Сохраняются как в источнике | Переносится | Переносятся |

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

white-space =
  normal        | (en-US)
  pre           | (en-US)
  nowrap        | (en-US)
  pre-wrap      | (en-US)
  break-spaces  | (en-US)
  pre-line

```

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

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

```css
code {
  white-space: pre;
}
```

### Перенос строк внутри элементов `<pre>`

```css
pre {
  word-wrap: break-word; /\* IE 5.5-7 \*/
  white-space: pre-wrap; /\* текущие браузеры \*/
}
```

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

| Specification |
| --- |
| CSS Text Module Level 3 # white-space-property |

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

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


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

position
========

Свойство `CSS` **`position`** указывает, как элемент позиционируется в документе. `top`, `right`, `bottom` и `left` (en-US) определяют конечное местоположение позиционированных элементов.Интерактивный пример
--------------------

### Типы позиционирования

* **Позиционируемый элемент** — это элемент, у которого `вычисленное значение` `position` является `relative`, `absolute`, `fixed` либо `sticky`. (Другими словами, это все, кроме `static`.)
* **Относительно позиционируемый элемент** является элементом, `вычисленное значение` `position` которого является `relative`. Свойства `top` и `bottom` определяют смещение по вертикали от его нормального положения; свойства `left` (en-US) и `right` задают горизонтальное смещение.
* **Абсолютно позиционируемый элемент** — это элемент, чьё `вычисленное значение` `position` является `absolute` или `fixed`. `top`, `right`, `bottom` и `left` (en-US) задают смещения от краёв `содержащего блок элемента`. (Содержащий блок является предком, относительно которого расположен элемент.) Если элемент имеет поля, они добавляются к смещению. Элемент устанавливает новый контекст форматирования блока (BFC) для своего содержимого.
* **Элемент с липкой позицией** — это элемент, у которого `значение вычисленного` `position` является `sticky`. Он рассматривается как относительно позиционированный до тех пор, пока `содержащий его блок` не пересечёт указанный порог (например, установка `top` в значение, отличное от `auto`) внутри его корня потока (или в контейнере, в котором он прокручивается), после чего он обрабатывается как «застрявший» до тех пор, пока не встретит противоположный край `содержащего его блока`.

В большинстве случаев абсолютно позиционированные элементы, которые имеют `height` и `width` установленные в `auto`, имеют размер, соответствующий их содержимому. Тем не менее, незамещаемые, абсолютно позиционированные элементы можно сделать такими, чтобы они заполнили доступное вертикальное пространство, указав как `top`, так и `bottom`, и оставляя `height` неопределённым (то есть , `auto`). Ими также можно заполнить доступное горизонтальное пространство, указав как `left` (en-US), так и `right`, и оставляя `width` как `auto`.

За исключением только что описанного случая (абсолютно позиционированных элементов, заполняющих доступное пространство):

* Если указаны `top` и `bottom` (технически, не `auto`) — приоритет будет у `top`.
* Если указаны `left` и `right`: приоритет будет у `left`, когда `direction` `ltr` (английский язык, горизонтальный японский и т. д.), приоритет будет у `right`, когда `direction` является `rtl` (персидский , Арабский, иврит и т. д.).
Синтаксис
---------

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

### Значения

`static`

Это значение позволяет элементу находиться в обычном его состоянии, расположенном на своём месте в документе. Свойства `top`, `right`, `bottom`, `left` и `z-index` *не применяются* к данному элементу. Это значение по умолчанию.

`relative`

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается *относительно себя* на основе значений `top`, `right`, `bottom` и `left`. Смещение не влияет на положение любых других элементов, то есть пространство, выделяемое для элемента в макете страницы, такое же, как если бы позиция была `static`. Это значение создаёт новый `контекст наложения`, когда значение `z-index` не `auto`. Его влияние на элементы `table-*-group`, `table-row`, `table-column`, `table-cell` и `table-caption` не определено.

`absolute`

Элемент удаляется из обычного потока документа, и для элемента в макете страницы не выделяется дополнительное пространство. Он располагается относительно своего ближайшего спозиционированного предка, если такой есть; в противном случае он помещается относительно исходного `содержащего блока`. Его конечная позиция определяется значениями `top`, `right`, `bottom`, и `left`. Это значение создаёт новый `контекст наложения`, когда значение `z-index` не `auto`. Внешние отступы абсолютно спозиционированных блоков не `схлопываются` с отступами других блоков.

`fixed`

Элемент выбивается из обычного потока документа, и для элемента в макете страницы не создаётся пространство. Он позиционируется относительно исходного `содержащего блока`, установленного viewport, за исключением случаев, когда один из его предков имеет свойство `transform`, `perspective`, или `filter`, установленное на что-то иное, кроме `none` (см. CSS Transforms Spec), и в этом случае этот предок ведёт себя как содержащий блок. (Обратите внимание, что существуют несогласованности браузера с `perspective` и `filter`, способствующими содержанию формирования блоков.) Его конечная позиция определяется значениями `top`, `right`, `bottom` и `left`. Это значение всегда создаёт новый `контекст наложения`. При печати `fixed`-элемент помещается в одно и то же место на *каждой странице*.

`sticky`

Элемент позиционируется в соответствии с нормальным потоком документа, а затем смещается относительно его ближайшего *прокручивающего предка* и `содержащего блока` (ближайший родительский уровень блока), включая элементы, связанные с таблицей, на основе значений `top`, `right`, `bottom`, и `left`. Смещение не влияет на положение любых других элементов.Это значение всегда создаёт новый `контекст наложения`. Обратите внимание, что липкий элемент «прилипает» к его ближайшему предшественнику, имеющему «механизм прокрутки» (созданный при `overflow` равном `hidden`, `scroll`, `auto` или `overlay`), даже если тот не является ближайшим фактически прокручивающим предком. Это эффективно препятствует любому «липкому» поведению (см. Github issue on W3C CSSWG).

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

position =
  static       | (en-US)
  relative     | (en-US)
  absolute     | (en-US)
  sticky       | (en-US)
  fixed        | (en-US)
  <running()>

<running()> =
  running( <custom-ident> )

```

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

### Относительное позиционирование

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

#### HTML

```html
<div class="box" id="one">One</div>
<div class="box" id="two">Two</div>
<div class="box" id="three">Three</div>
<div class="box" id="four">Four</div>
```

#### CSS

```css
.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: red;
  color: white;
}

#two {
  position: relative;
  top: 20px;
  left: 20px;
  background: blue;
}
```

### Абсолютное позиционирование

Элементы, расположенные относительно друг друга, остаются в нормальном потоке документа. В противоположность этому, элемент с абсолютным позиционированием, выбивается из потока; таким образом, другие элементы располагаются без учёта абсолютных. Абсолютно позиционируемый элемент располагается относительно его ближайшего предка (который не является `static`). Если такого предка не существует, то абсолютный элемент позиционируется относительно ICB (начальный содержащий блок - см. также определение W3C), который содержит блок корневого элемента документа.

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

```html
<h1>Абсолютное позиционирование</h1>
<p>
  Я базовый элемент уровня блока. Мои соседи сидят на новых строках ниже меня.
</p>
<p class="positioned">
  По умолчанию моя ширина 100% ширины родителя и я достиг такого же высокого
  уровня, как и весь дочерний контент. Наша общая ширина и высота - это наш
  контент+заполнение+ширина/высота границы.
</p>
<p>
  Мы отделены нашей маржой. Из-за развала края мы отделены шириной одного из
  наших полей, а не обоих.
</p>
<p>
  встроенные элементы <span>как этот</span> и <span>вот этот</span> будут сидеть
  в одной строке друг с другом и соседними текстовыми узлами, если в ней есть
  место. Переполнение встроенных элементов
  <span
 >перейдёт на новую строку, если это возможно, - как содержимое этого
    текста</span
 >, или просто перейдёт к новой строке, а если нет, то встанет, как это
  изображение:<img src="long.jpg" />
</p>
```

```css
body {
  width: 500px;
  margin: 0 auto;
}

p {
  background: aqua;
  border: 3px solid blue;
  padding: 10px;
  margin: 10px;
}

span {
  background: red;
  border: 1px solid black;
}

.positioned {
  position: absolute;
  background: yellow;
  top: 30px;
  left: 30px;
}
```

### Фиксированное позиционирование

Фиксированное позиционирование аналогично абсолютному, за исключением того, что блок, содержащий элемент, является начальным содержащим блоком, установленным в окне просмотра, если только у какого-либо предка не было `transform`, `perspective`, или свойства `filter`, отличное от `none` (см. CSS Transforms Spec), из-за чего этот предок занимает место элементов, содержащих блок. Это можно использовать для создания «плавающего» элемента, который остаётся в том же положении независимо от прокрутки. В приведённом ниже примере окно c `id="one"` фиксируется в 80 пикселях от верхней части страницы и в 10 пикселях слева. Даже после прокрутки оно остаётся в том же месте относительно окна просмотра.

#### HTML

```html
<div class="outer">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam congue tortor
    eget pulvinar lobortis. Vestibulum ante ipsum primis in faucibus orci luctus
    et ultrices posuere cubilia Curae; Nam ac dolor augue. Pellentesque mi mi,
    laoreet et dolor sit amet, ultrices varius risus. Nam vitae iaculis elit.
    Aliquam mollis interdum libero. Sed sodales placerat egestas. Vestibulum ut
    arcu aliquam purus viverra dictum vel sit amet mi. Duis nisl mauris, aliquam
    sit amet luctus eget, dapibus in enim. Sed velit augue, pretium a sem
    aliquam, congue porttitor tortor. Sed tempor nisl a lorem consequat, id
    maximus erat aliquet. Sed sagittis porta libero sed condimentum. Aliquam
    finibus lectus nec ante congue rutrum. Curabitur quam quam, accumsan id
    ultrices ultrices, tempor et tellus.
  </p>
  <div class="box" id="one">One</div>
</div>
```

#### CSS

```css
.box {
  background: red;
  width: 100px;
  height: 100px;
  margin: 20px;
  color: white;
}
#one {
  position: fixed;
  top: 80px;
  left: 10px;
}
.outer {
  width: 500px;
  height: 500px;
  overflow: scroll;
  padding-left: 150px;
}
```

### Липкое позиционирование

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

```css
#one {
  position: sticky;
  top: 10px;
}
```

... позиционирует элемент с id "one" относительно до тех пор, пока видовой экран не будет прокручен таким образом, чтобы элемент был меньше 10 пикселей от вершины. Помимо этого порога элемент будет зафиксирован на 10 пикселей сверху.

Типичное использование для липкого позиционирования - для заголовков в алфавитном списке. Заголовок «B» появится чуть ниже элементов, начинающихся с «A», пока они не будут прокручиваться за кадром. Вместо того, чтобы скользить за кадром с остальной частью содержимого, заголовок «B» затем останется фиксированным в верхней части окна просмотра, пока все элементы «B» не будут прокручиваться на экране, и в этот момент он будет закрыт «C», заголовок и т. д.

Вы должны указать порог с по крайней мере одним из `top`, `right`, `bottom`, или `left` (en-US) для того, чтобы липкое позиционирование могло вести себя так, как ожидалось. В противном случае он будет неотличим от относительного позиционирования.

#### HTML

```html
<div>
  <dl>
    <dt>A</dt>
    <dd>Andrew W.K.</dd>
    <dd>Apparat</dd>
    <dd>Arcade Fire</dd>
    <dd>At The Drive-In</dd>
    <dd>Aziz Ansari</dd>
  </dl>
  <dl>
    <dt>C</dt>
    <dd>Chromeo</dd>
    <dd>Common</dd>
    <dd>Converge</dd>
    <dd>Crystal Castles</dd>
    <dd>Cursive</dd>
  </dl>
  <dl>
    <dt>E</dt>
    <dd>Explosions In The Sky</dd>
  </dl>
  <dl>
    <dt>T</dt>
    <dd>Ted Leo & The Pharmacists</dd>
    <dd>T-Pain</dd>
    <dd>Thrice</dd>
    <dd>TV On The Radio</dd>
    <dd>Two Gallants</dd>
  </dl>
</div>
```

#### CSS

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

dl {
  margin: 0;
  padding: 24px 0 0 0;
}

dt {
  background: #b8c1c8;
  border-bottom: 1px solid #989ea4;
  border-top: 1px solid #717d85;
  color: #fff;
  font:
    bold 18px/21px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 2px 0 0 12px;
  position: -webkit-sticky;
  position: sticky;
  top: -1px;
}

dd {
  font:
    bold 20px/45px Helvetica,
    Arial,
    sans-serif;
  margin: 0;
  padding: 0 0 0 12px;
  white-space: nowrap;
}

dd + dd {
  border-top: 1px solid #ccc;
}
```

Доступность
-----------

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

* MDN Understanding WCAG, Guideline 1.4 explanations (en-US)
* Visual Presentation: Understanding SC 1.4.8 | Understanding WCAG 2.0
### Производительность и доступность

Элементы прокрутки, содержащие `fixed` или `sticky` контент, могут вызвать проблемы с производительностью и доступностью. Когда пользователь прокручивает страницу, браузер должен перерисовать `sticky` или `fixed` контент в новом месте. В зависимости от содержимого, которое необходимо перерисовать, производительности браузера и скорости обработки устройства, браузер может не справиться с перерисовкой со скоростью 60 кадров в секунду, что вызывает проблемы с доступностью для людей с чувствительностью и раздражением для всех. Одним из решений является добавление `will-change: transform` к позиционированным элементам для визуализации элемента на его собственном уровне, повышения скорости перерисовки и, следовательно, повышения производительности и доступности.

Характеристики
--------------

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # position-property |

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

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


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

inset
=====

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

Свойство CSS **`inset`** определяет логический блок и встроенные начальное и конечное смещения элемента, которые отображают физическое смещение, зависящее от способа записи, направления и ориентации текста. Оно соответствует свойствам `top` и `bottom`, или `right` и `left` (en-US), в зависимости от значений, определённых для `writing-mode`, `direction`, и `text-orientation` (en-US).

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

/\* <length> значения \*/
inset: 3px 10px 3px 10px;
inset: 2.4em 3em 3em 3em;
inset: 10px; /\* значение применяется ко всем сторонам \*/

/\* <percentage> от ширины или высоты внешнего блока \*/
inset: 10% 5% 5% 5%;

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `top`: `auto`
* `bottom`: `auto`
* `left` (en-US): `auto`
* `right`: `auto`
 |
| Применяется к | позиционированные элементы |
| Наследуется | нет |
| Проценты | относительно размера содержащего блока на соответствующей оси (например, ширина слева или справа, высота сверху и снизу) |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `top`: если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto`
* `bottom`: если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto`
* `left` (en-US): если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto`
* `right`: если указано как длина - абсолютная длина; если указано как проценты - заданное значение; в противном случае `auto`
 |
| Animation type | длина, проценты или calc(); |

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

### Значения

Свойство `inset` принимает значения, аналогичные значениям свойства `left` (en-US).

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

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

```

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

### HTML-содержимое

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

### CSS-содержимое

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

.exampleText {
  writing-mode: vertical-lr;
  position: relative;
  inset: 20px 50px 30px 10px;
  background-color: #c8c800;
}
```

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

| Specification |
| --- |
| CSS Logical Properties and Values Level 1 # propdef-inset |

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

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

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

* Сопоставление физических свойств: `top`, `right`, `bottom`, and `left` (en-US)
* `writing-mode`, `direction`, `text-orientation` (en-US)


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

gap (grid-gap)
==============

Свойство **`gap`** CSS задаёт отступы (en-US) между колонками и рядами. Является сокращением для свойств `row-gap` и `column-gap`.

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

Обратите внимание, что `grid-gap` является псевдонимом для этого свойства.

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

```css
/\* One <length> value \*/
gap: 20px;
gap: 1em;
gap: 3vmin;
gap: 0.5cm;

/\* One <percentage> value \*/
gap: 16%;
gap: 100%;

/\* Two <length> values \*/
gap: 20px 10px;
gap: 1em 0.5em;
gap: 3vmin 2vmax;
gap: 0.5cm 2mm;

/\* One or two <percentage> values \*/
gap: 16% 100%;
gap: 21px 82%;

/\* calc() values \*/
gap: calc(10% + 20px);
gap: calc(20px + 10%) calc(10% - 5px);

/\* Global values \*/
gap: inherit;
gap: initial;
gap: revert;
gap: revert-layer;
gap: unset;
```

Свойство задаёт значение для `<'row-gap'>`, за которым может следовать значение для `<'column-gap'>`. Если `<'column-gap'>` опущено, то оно устанавливается в то же значение, что и `<'row-gap'>`.

`<'row-gap'>` и `<'column-gap'>` могут быть заданы как `<length>`, так и `<percentage>`.

### Значения

`<length>`

Размер отступа, разделяющего линии сетки.

`<percentage>`

Размер отступа, разделяющего линии сетки, относительно размера грид-элемента.

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `row-gap`: `normal`
* `column-gap`: `normal`
 |
| Применяется к | multi-column elements, flex containers, grid containers |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `row-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
* `column-gap`: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `row-gap`: длина, проценты или calc();
* `column-gap`: длина, проценты или calc();
 |

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

gap =
  <'row-gap'> <'column-gap'>? (en-US)

```

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

### Флексбокс-раскладка

#### HTML

```html
<div id="flexbox">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#flexbox {
  display: flex;
  flex-wrap: wrap;
  width: 300px;
  gap: 20px 5px;
}

#flexbox > div {
  border: 1px solid green;
  background-color: lime;
  flex: 1 1 auto;
  width: 100px;
  height: 50px;
}
```

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

### Грид-раскладка

#### HTML

```html
<div id="grid">
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 200px;
  grid-template: repeat(3, 1fr) / repeat(3, 1fr);
  gap: 20px 5px;
}

#grid > div {
  border: 1px solid green;
  background-color: lime;
}
```

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

### Многоколоночная раскладка

#### HTML

```html
<p class="content-box">
  This is some multi-column text with a 40px column gap created with the CSS
  <code>gap</code> property. Don't you think that's fun and exciting? I sure do!
</p>
```

#### CSS

```css
.content-box {
  column-count: 3;
  gap: 40px;
}
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # gap-shorthand |

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

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

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

* Похожие CSS-свойства: `row-gap`, `column-gap`
* Руководство по грид-раскладке: *Основы грид-раскладки - Отступы*


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

@layer
======

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

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

* Learn more
* See full compatibility
* Report feedback
CSS @-правило **`@layer`** используется для объявления каскадного слоя, а также позволяет задать приоритеты при наличии нескольких каскадных слоёв.

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

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

```css
@layer layer-name {rules}
@layer layer-name;
@layer layer-name, layer-name, layer-name;
@layer {rules}
```

где:

*layer-name*

Название каскадного слоя.

*rules*

Набор CSS-правил каскадного слоя.

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

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

@-правило `@layer` используется для создания каскадного слоя одним из трёх способов.

Первый способ — создать именованный каскадный слой с набором CSS-правил внутри этого слоя:

```css
@layer utilities {
  .padding-sm {
    padding: 0.5rem;
  }

  .padding-lg {
    padding: 0.8rem;
  }
}
```

Второй способ — создать именованный каскадный слой без стилей. Можно определить один слой:

```css
@layer utilities;
```

Или несколько слоёв одновременно:

```css
@layer theme, layout, utilities;
```

Это полезно, потому что первоначальный порядок объявления слоёв указывает на их приоритет. Если объявления найдены в нескольких слоях, то наивысшим приоритетом обладает последний слой. Таким образом, в предшествующем примере, если бы в слоях `theme` и `utilities` было найдено одинаковое правило, победу одержало бы правило из `utilities` и оно было бы применено.

Правило в слое `utilities` будет применено *даже если у него меньшая специфичность*, чем правило в слое `theme`. Это происходит потому, что после определения порядка слоёв игнорируются специфичность и порядок появления. Это позволяет создавать более простые селекторы в CSS, поскольку не нужно обеспечивать высокую специфичность селектора для переопределения конфликтующих правил, важно только, чтобы он появлялся в более позднем слое.

**Примечание:** Объявив имена слоёв и установив их порядок, вы можете добавить CSS-правила в слой, повторно объявив его имя. Таким образом стили добавятся к слою, и порядок слоёв не изменится.

Третий способ — создать каскадный слой без имени:

```css
@layer {
  p {
    margin-block: 1rem;
  }
}
```

Это создаёт *анонимный каскадный слой*. Такой слой работает так же, как и именованные слои, однако ему нельзя позже присвоить правила. Порядок приоритета для анонимных слоёв определяется порядком их объявления, с именем или без, и ниже стилей, объявленных вне слоя.

Ещё один способ создать каскадный слой — использовать `@import` (en-US). В этом случае правила будут находиться в импортированном файле стилей. Помните, что @-правило `@import` должно предшествовать всем другим типам правил, за исключением правил `@charset` и `@layer`.

```css
@import "theme.css" layer(utilities);
```

### Вложение слоёв

Слои могут быть вложенными, например:

```css
@layer framework {
  @layer layout {
  }
}
```

Для добавления правил в слой `layout`, который находится внутри `framework`, используйте запись через точку.

```css
@layer framework.layout {
  p {
    margin-block: 1rem;
  }
}
```

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

@layer =
  @layer <layer-name>? (en-US) { <rule-list> }  | (en-US)
  @layer <layer-name># (en-US) ;

<layer-name> =
  <ident> (en-US) [ (en-US) '.' <ident> (en-US) ] (en-US)\* (en-US)

```

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

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

В этом примере создаются два CSS правила: одно для элемента `<p>` вне какого-либо слоя и одно внутри слоя с именем `type` для `.box p`.

Без слоёв селектор `.box p` имел бы наивысшую специфичность и текст `Hello, world!` отобразился бы зелёным. Но так как слой `type` имеет меньший приоритет, чем анонимный слой, текст будет фиолетовым.

Также обратите внимание на порядок. Несмотря на то, что мы сначала объявляем стиль без слоёв, он всё равно применяется *после* стилей слоя.

#### HTML

```html
<div class="box">
  <p>Привет, мир!</p>
</div>
```

#### CSS

```css
p {
  color: rebeccapurple;
}

@layer type {
  .box p {
    font-weight: bold;
    font-size: 1.3em;
    color: green;
  }
}
```

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

### Присвоение правил существующим слоям

В этом примере создаются два слоя без применённых правил. Затем применяются CSS-правила к обоим слоям. Слой `base` определяет `color`, `border`, `font-size` и `padding`. Слой `special` определяет другой цвет. Поскольку `special` идёт последним при определении слоёв, используется определённый в нём цвет, и текст отображается с использованием `rebeccapurple`. Все остальные правила применяются из `base`.

#### HTML

```html
<div class="item">
  Я отображаюсь фиолетовым цветом, потому что слой <code>special</code> идёт
  после слоя <code>base</code>. Значения свойств border, font-size и padding
  берутся из слоя <code>base</code>.
</div>
```

#### CSS

```css
@layer base, special;

@layer special {
  .item {
    color: rebeccapurple;
  }
}

@layer base {
  .item {
    color: green;
    border: 5px solid green;
    font-size: 1.3em;
    padding: 0.5em;
  }
}
```

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

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 5 # layering |

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

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

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

* `@import` (en-US)
* `CSSLayerBlockRule` (en-US)
* `CSSLayerStatementRule` (en-US)
* `!important` (en-US)
* `revert-layer` (en-US)
* Введение в каскадность CSS (en-US)
* Каскад, специфичность и наследование
* Cascade layers (en-US)
* The future of CSS: Cascade layers на bram.us


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

flex-basis
==========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS свойство **`flex-basis`** задаёт базовый размер флекс элемента по **основной оси**. Это свойство определяет размер контент-бокса, если не задано иначе через `box-sizing`.

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

**Примечание:** в случае, если для элемента одновременно заданы `flex-basis` (отличное от `auto`) и `width` ( или `height` в случае `flex-direction: column`), `flex-basis` имеет приоритет.

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

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

```css
/\* Устанавливает <'ширину'> \*/
flex-basis: 10em;
flex-basis: 3px;
flex-basis: auto;

/\* Intrinsic sizing keywords \*/
flex-basis: fill;
flex-basis: max-content;
flex-basis: min-content;
flex-basis: fit-content;

/\* Автоматически изменяет размер на основе содержимого элемента \*/
flex-basis: content;

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

Свойство `flex-basis` задаётся через ключевое слово `content` или через `<'width'>`.

### Значения

`<'ширина'>`

An absolute `<length>`, a `<percentage>` родительского flex контейнера главное size свойство, или ключевое слово `auto`. Негативные значения не допустимы.

`content`

Автоматический задаёт размер на основе содержимого элемента flex.

**Примечание:** Это значение отсутствовало в первоначальном релизе Flexible Box Layout, и, следовательно, некоторые предыдущие релизы не будут поддерживать его. Аналогичный эффект можно получить, используя `auto` вместе с основным размером (width или height) `auto`.

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

* Первоначально, `flex-basis:auto` означает "смотреть на значения `width` или `height`".
* Затем `flex-basis:auto` был изменён на автоматический размер, а "main-size" было введено как ключевое слово, означающее "смотреть на значения `width` или `height`". Это было реализован в баге 1032922.
* Затем в баге 1093316 это было возвращено обратно, поэтому `auto` снова означает "смотреть на значения `width` или `height`"; а новое ключевое слово `content` было введено для автоматического размера. (Firefox bug 1105111 охватывает добавление этого ключевого слова).

### Formal syntax
```

flex-basis =
  content    | (en-US)
  <'width'>

```

Example
-------

### HTML

```html
<ul class="container">
  <li class="flex flex1">1: flex-basis test</li>
  <li class="flex flex2">2: flex-basis test</li>
  <li class="flex flex3">3: flex-basis test</li>
  <li class="flex flex4">4: flex-basis test</li>
  <li class="flex flex5">5: flex-basis test</li>
</ul>

<ul class="container">
  <li class="flex flex6">6: flex-basis test</li>
</ul>
```

### CSS

```css
.container {
  font-family: arial, sans-serif;
  margin: 0;
  padding: 0;
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
}

.flex {
  background: #6ab6d8;
  padding: 10px;
  margin-bottom: 50px;
  border: 3px solid #2e86bb;
  color: white;
  font-size: 20px;
  text-align: center;
  position: relative;
}

.flex:after {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 100%;
  margin-top: 10px;
  width: 100%;
  color: #333;
  font-size: 18px;
}

.flex1 {
  flex-basis: auto;
}

.flex1:after {
  content: "auto";
}

.flex2 {
  flex-basis: max-content;
}

.flex2:after {
  content: "max-content";
}

.flex3 {
  flex-basis: min-content;
}

.flex3:after {
  content: "min-content";
}

.flex4 {
  flex-basis: fit-content;
}

.flex4:after {
  content: "fit-content";
}

.flex5 {
  flex-basis: content;
}

.flex5:after {
  content: "content";
}

.flex6 {
  flex-basis: fill;
}

.flex6:after {
  content: "fill";
}
```

### Results

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1 # flex-basis-property |

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

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

See also
--------

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Controlling Ratios of flex items along the main axis (en-US)*
* `width`


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

hyphens
=======

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

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

Правила расстановки переносов зависят от языка. В HTML язык определяется атрибутом `lang`, и браузеры применяют правила переноса только при присутствии данного атрибута и доступности соответствующего словаря для расстановки переносов. В XML необходимо использовать атрибут `xml:lang` (en-US).

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

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

```css
/\* Keyword values \*/
hyphens: none;
hyphens: manual;
hyphens: auto;

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

Свойство `hyphens` задаётся как одно из ключевых значений, выбранного из списка ниже.

### Значения

`none`

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

`manual`

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

`auto`

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

**Примечание:** Поведение параметра `auto` зависит от того, на каком языке применяются правила переноса. Вы должны указать язык с помощью HTML атрибута `lang`, чтобы гарантировать, что на этом языке применяется автоматическая расстановка переносов.

Предлагаемые возможности разрыва строки
---------------------------------------

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

U+2010 (HYPHEN)

«Жёсткий» дефис указывает на возможность видимого разрыва строки. Даже если строка в этом месте не переносится, дефис всё равно отображается.

U+00AD (SHY)

Невидимый «мягкий» перенос. Этот символ не отображается визуально, вместо этого он отмечает место, где браузер должен разорвать слово, если расстановка переносов необходима. В HTML, используйте `` для вставки мягкого дефиса.

**Примечание:** Когда HTML-элемент `<wbr>` приводит к разрыву строки, дефис не добавляется.

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

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

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

hyphens =
  none    | (en-US)
  manual  | (en-US)
  auto

```

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

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

В этом примере используются три класса, по одному для каждой возможной конфигурации свойства `hyphens`.

#### HTML

```html
<dl>
  <dt><code>none</code>: no hyphen; overflow if needed</dt>
  <dd lang="en" class="none">An extremely long English word</dd>
  <dt>
    <code>manual</code>: hyphen only at &hyphen; or &shy; (if needed)
  </dt>
  <dd lang="en" class="manual">An extremely long English word</dd>
  <dt><code>auto</code>: hyphens where the algorithm decides (if needed)</dt>
  <dd lang="en" class="auto">An extremely long English word</dd>
</dl>
```

#### CSS

```css
dd {
  width: 55px;
  border: 1px solid black;
}
dd.none {
  -webkit-hyphens: none;
  -ms-hyphens: none;
  hyphens: none;
}
dd.manual {
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}
dd.auto {
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}
```

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

Характеристики
--------------

| Specification |
| --- |
| CSS Text Module Level 3 # hyphens-property |

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

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

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

* `content`
* `overflow-wrap` (formerly `word-wrap`)
* `word-break`


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

:not()
======

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

**Отрицательный** CSS псевдокласс (en-US), `:not(X)` - функция, принимающая простой селектор *X* в качестве аргумента. Он находит элементы, не соответствующие селектору. *X* не должен содержать других отрицательных селекторов.

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

* С этого псевдокласса можно написать бесполезные селекторы. Например, `:not(*)` найдёт любой элемент, являющийся не любым, то есть правило не применится ни к одному элементу.
* Возможно переписать другие правила. Например `foo:not(bar)` найдёт тот же элемент, что и простой `foo`. Тем не менее специфичность (en-US) первого выше.
* `:not(foo){}` найдёт что угодно, что не `foo`, **включая `<html>` и `<body>`.**
* Это селектор применяется только к одному элементу. Вы не можете использовать его, чтобы исключить всех родителей. Например, `body :not(table) a` применится к ссылкам внутри таблицы, тогда как `<tr>` (en-US) будет соответствовать `:not()` части селектора.

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

:not(selector) { style properties }
```

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

```css
p:not(.classy) {
  color: red;
}
body :not(p) {
  color: green;
}
```

CSS выше и HTML ниже...

```html
<p>Некоторый текст.</p>
<p class="classy">Какой-то другой текст.</p>
<span>Ещё текст</span>
```

Выведет это:

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

| Specification |
| --- |
| Selectors Level 4 # negation |

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

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


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

Начальное значение
==================

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

**Начальное значение**, данное в кратком описании каждого CSS-свойства имеет различное значение для наследуемых и не наследуемых свойств.

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

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

Ключевое слово `initial` добавлено в CSS3, чтобы предоставить авторам возможность явно указывать это первоначальное значение.

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

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


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

Инструмент выбора цвета
=======================

Этот инструмент позволяет легко создавать, настраивать и экспериментировать с пользовательскими цветами для использования в интернете. Он также позволяет легко конвертировать цвета в различные форматы, поддерживаемые CSS, в том числе: шестнадцатеричный формат, RGB (красный / зелёный / синий) и HSL (Цветовой тон / Насыщенность / Яркость). Контроль над альфа-каналом (прозрачностью) поддерживается в форматах RGB (RGBA) и HSL (HSLA).

Каждый цвет во время настройки представлен во всех 3-х стандартных форматах CSS, и, кроме того, на основе текущего выбранного цвета генерируется палитра для HSL, HSV и альфа-канала. Кнопкой "пипетка" можно переключаться между HSL или HSV форматами.