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

float
=====

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

Summary
-------

CSS-свойство `float` указывает, что текущий элемент должен быть изъят из обычного flow (потока) и прижат к левой или правой стороне родительского элемента. Текст и inline элементы будут обтекать такой элемент.

**Плавающий элемент** - это любой элемент со свойством `float` отличным от `none`.

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

Поскольку `float` подразумевает использование блочной модели, это свойство изменяет вычисляемые значения `display` в следующих случаях:

| Specified value | Computed value |
| --- | --- |
| `inline` | `block` |
| `inline-block` | `block` |
| `inline-table` | `table` |
| `table-row` | `block` |
| `table-row-group` | `block` |
| `table-column` | `block` |
| `table-column-group` | `block` |
| `table-cell` | `block` |
| `table-caption` | `block` |
| `table-header-group` | `block` |
| `table-footer-group` | `block` |
| `flex` | `flex`, `float` не оказывает влияния на такие элементы |
| `inline-flex` | `inline-flex`, `float` не оказывает влияния на такие элементы |
| *other* | *не меняются* |

>
> \*\*Примечание:\*\*If you're referring to this property from JavaScript as a member of the `element.style` object, you must spell it as `cssFloat`. Also note that Internet Explorer versions 8 and older spelled this `styleFloat`. This is an exception to the rule that the name of the DOM member is the camel-case name of the dash-separated CSS name (and is due to the fact that "float" is a reserved word in JavaScript, as with the need to escape "class" as "className" and escape <label>'s "for" as "htmlFor").
>
>
>

Syntax
------

```css
float: left;
float: right;
float: none;

float: inherit;
```

### Values

`left`

Is a keyword indicating that the element must float on the left side of its containing block.

`right`

Is a keyword indicating that the element must float on the right side of its containing block.

`none`

Is a keyword indicating that the element must not float.

### Formal syntax
```

float =
  block-start      | (en-US)
  block-end        | (en-US)
  inline-start     | (en-US)
  inline-end       | (en-US)
  snap-block       | (en-US)
  <snap-block()>   | (en-US)
  snap-inline      | (en-US)
  <snap-inline()>  | (en-US)
  left             | (en-US)
  right            | (en-US)
  top              | (en-US)
  bottom           | (en-US)
  none             | (en-US)
  footnote

<snap-block()> =
  snap-block( <length> , [ (en-US) start | (en-US) end | (en-US) near ] (en-US)? (en-US) )

<snap-inline()> =
  snap-inline( <length> , [ (en-US) left | (en-US) right | (en-US) near ] (en-US)? (en-US) )

```

Examples
--------

Посмотреть живые примеры

```html
<style type="text/css">
 div {
 border: solid red;
 max-width: 70ex;
 }
 h4 {
 float: left;
 margin: 0;
 }
</style>

<div>
  <h4>HELLO!</h4>
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
  This is some text. This is some text. This is some text. This is some text.
</div>
```

#### HELLO!

This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.

### How floats are positioned

As mentioned above, when an element is floated it is taken out of the normal flow of the document. It is shifted to the left or right until it touches the edge of it's containing box *or another floated element*.

In the image below, there are three red squares. Two are floated left and one is floated right. Note that the second "left" red square is placed to the right of the first. Additional squares would continue to stack to the right until they filled the containing box, after which they would wrap to the next line.

### Clearing floats

In the example above, the floated elements are shorter vertically than the block of text they're floated within. However, if the text was not long enough to wrap below the bottom of all the floats, we might see unanticipated effects. If the paragraph above, for instance, only read "Lorem ipsum dolor sit amet," and was followed by another heading of the same style as the "Floats Example" heading, the second heading would appear between the red boxes. Most likely, we want the next heading to be aligned all the way to the left. To accomplish that, we'd need to clear the floats.

The simplest way to clear the floats in this example is to add the `clear` property to the new heading we want to be sure is aligned left:

```css
h2.secondHeading {
  clear: both;
}
```

However, this method only works if there are no other elements within the same block formatting context (en-US) that we *do* want the heading to continue to appear next to horizontally. If our `H2` has siblings which are a sidebars floated to the left and right, using `clear` will force it to appear below both sidebars, which is probably not what we want.

If clearing floats on an element below them is not an option, another approach is to limit the block formatting context of the floats' container. Referring to the example above again, it appears that all three red boxes are within a `P` element. We can set the `overflow` property on that P to `hidden` or `auto` to cause it to expand to contain them, but not allow them to drop out the bottom of it:

```css
p.withRedBoxes {
  overflow: hidden;
  height: auto;
}
```

**Примечание:** Setting `overflow` to `scroll` will also contain any floated child elements, but will show scrollbars no matter the height of the content. Here we're setting `height` to `auto` even though that's the default to indicate that the container should grow to accommodate its content.

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

| Specification |
| --- |
| Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification # propdef-float |
| CSS Logical Properties and Values Level 1 # float-clear |

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

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

See also
--------

* Block formatting context (en-US)


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

<time>
======

Тип данных CSS **`<time>`** представляет значение времени, выраженное в секундах или миллисекундах. Он используется в `animation`, `transition`, и связанных свойствах.

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

Тип данных `<time>` состоит из `<number>`, который следует за одним из нижеперечисленных значений. На выбор, ему может предшествовать символ `+` или `-` символ. Как и во всех измерениях, между символом и числом не допускается пробел.

**Примечание:** Хотя число `0` имеет одно значение, независимо от единиц измерения, они не могут быть опущены. Другими словами `0` недопустимо и представляется `0s` или `0ms`.

### Единицы

**`s`**

Представляет время в секундах. Примеры: `0s`, `1.5s`, `-60s`.

**`ms`**

Представляет время в миллисекундах. Примеры: `0ms`, `150.25ms`, `-60000ms`.

**Примечание:** Преобразование между `s` и `ms` следует из логики `1s` = `1000ms`.

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

### Валидное время
```

12s         Положительное целочисленные
-456ms      Отрицательное целочисленные
4.3ms       Нецелочисленное
14mS        Единица регистронечувствительна, однако, заглавные буквы не рекомендуются
+0s         Ноль с первоначальным + и единица измерения
-0ms        Ноль с первоначальным - и единица измерения
```

### Невалидное время
```

0           Хотя ноль разрешён без единиц измерения для <length>, это невалидно для <time>.
12.0        Это <number>, а не <time>, так как пропущена единица измерения.
7 ms        Пробел между числом и единицей измерения не допускается.
```

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

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

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

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


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

<number>
========

**`<number>`** - тип хранения данных в CSS представляющий собой число: либо целое, либо с дробной частью.

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

Синтаксис `<number>` расширяет синтаксис `<integer>`. Дробное значение представлено с помощью `.`, после которой стоит одна (или более) цифра, и может быть присоединено к целочисленному типу данных. Не существует единицы измерения, связанной с числами.

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

Во время анимации, значения типа данных CSS `<number>` являются интерполированными как числа вещественные или с плавающей точкой. Скорость интерполяции определена timing function (en-US), связанной с анимацией.

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

### Корректные числа
```

12          Ряд, состоящий из <integer>, также является <number>.
4.01        Положительное число с плавающей точкой
-456.8      Отрицательно число с плавающей точкой
0.0         Нуль
+0.0        Нуль, с + перед ним
-0.0        Нуль, с - перед ним
.60         Дробное число без присутствия нуля
10e3        Научное обозначение
-3.4e-2     Сложное научное обозначение
```

### Некорректные числа
```

12.         После дробных чисел должна присутствовать как минимум 1 цифра.
+-12.2      Одновременно перед числом допустимо ставить только один из символов +/-.
12.1.1      Разрешена только одна "дробная" точка.
```

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

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

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

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

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

* `<integer>`


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

text-size-adjust
================

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

Свойство **`text-size-adjust`** контролирует алгоритм увеличения текста, используемый на некоторых смартфонах и планшетах. Другие браузеры будут игнорировать это свойство.

Так как это свойство нестандартное, нужно использовать префиксы: `-moz-text-size-adjust`, `-webkit-text-size-adjust`, и `-ms-text-size-adjust`.

Поскольку при разработке многих сайтов не подразумевался их просмотр на мобильных устройствах, то мобильные браузеры отличаются от браузеров для настольных компьютеров способом вывода страницы на экран. Для размещения страниц они используют не ширину экрана устройства, а viewport, который значительно шире, обычно 800 или 1000 пикселей. Чтобы вернуть соответствие слишком широкой страницы истинному размеру устройства, они или показывают лишь часть того, что на самом деле визуализировано, или же уменьшают размер viewport до размеров устройства.

Так как текст, который был уменьшен для того, чтобы уместиться на мобильном экране, может стать очень маленьким, многие мобильные браузеры применяют алгоритм увеличения текста для того, чтобы масштабировать текст и сделать его более удобным для чтения. Когда элемент, содержащий текст, использует 100% ширины экрана, алгоритм увеличивает размер его текста, но без изменения макета. Свойство `text-size-adjust` позволяет веб-разработчикам отменить или изменить это поведение, так как веб-страницы, созданные с учётом вывода на маленькие экраны, не нуждаются в нём.

This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.

But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text **inflation** algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.

The `text-size-adjust` property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.

>
> **Предупреждение**: Это свойство является нестандартным. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.
>
>
> * Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.
> * **Это свойство работает только на смартфонах.** As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, *not to opt in*.
> * If `-webkit-text-size-adjust` is explicitly set to `none`, old versions of Webkit-based desktop and tablet browsers, like Chrome≤26 or Safari≤5, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#
> * Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.
>
>
>

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

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

```css
/\* Text is never inflated \*/
text-size-adjust: none;

/\* Text may be inflated \*/
text-size-adjust: auto;

/\* Text may be inflated in this exact proportion \*/
text-size-adjust: 80%;

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

### Значения

`none`

Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On old WebKit-based desktop browsers (Chrome≤26, Safari≤5), this will instead prevent the user from zooming the webpage in or out.

`auto`

Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a `none` value previously set.

`<percentage>`

A percentage value is a synonym of the `auto` keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.

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

text-size-adjust =
  auto                | (en-US)
  none                | (en-US)
  <percentage [0,∞]>

```

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

| Specification |
| --- |
| CSS Mobile Text Size Adjustment Module Level 1 # adjustment-control |

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

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

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

* Документация от Apple.
* Описание поведения Gecko от L. David Baron.
* Документация от Microsoft.


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

flex-direction
==============

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-direction` указывает, как flex-элементы располагаются во flex-контейнере по главной оси и направлению (обычном или обратном).

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

Обратите внимание, что значения `row` и `row-reverse` зависят от направления flex-контейнера. Если его атрибут `dir` равен `ltr`, то `row` представляет собой горизонтальную ось, направленную слева направо, а `row-reverse` — справа налево; если атрибут `dir` равен `rtl`, то `row` представляет собой горизонтальную ось, ориентированную справа налево, а `row-reverse` — слева направо.

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

```css
/\* Направление, в котором блоки будут располагаться в строку \*/
flex-direction: row;

/\* Как <row>, но наоборот \*/
flex-direction: row-reverse;

/\* Направление, в котором блоки будут располагаться в виде столбца \*/
flex-direction: column;

/\* Как <column>, но наоборот \*/
flex-direction: column-reverse;

/\* Общие значения \*/
flex-direction: inherit;
flex-direction: initial;
flex-direction: revert;
flex-direction: revert-layer;
flex-direction: unset;
```

### Значения

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

`row`

Главная ось flex-контейнера определена точно так же, как направление текста. Точки **main-start** и **main-end** совпадают с направлением контента.

`row-reverse`

Ведёт себя аналогично `row`, но точки **main-start** и **main-end** переставлены местами.

`column`

Главная ось flex-контейнера такая же, как ось блока (block-axis). Точки **main-start** и **main-end** такие же, как точки **before** и **after** режима записи (writing-mode).

`column-reverse`

Ведёт себя как `column`, но точки **main-start** и **main-end** переставлены местами.

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

Использование свойства `flex-direction` со значениями `row-reverse` и `column-reverse` создаст различие между визуальным представлением содержимого и его порядком в DOM. Это отрицательно влияет на пользователей с плохим зрением, использующих навигацию с помощью вспомогательных технологий, таких как программы чтения с экрана. Если визуальный порядок важен, пользователи программ чтения с экрана не будут иметь доступа к правильному порядку.

* Flexbox & the keyboard navigation disconnect — Tink
* Source Order Matters | Adrian Roselli
* MDN Understanding WCAG, Guideline 1.3 explanations (en-US)
* Understanding Success Criterion 1.3.2 | W3C Understanding WCAG 2.0
### Формальное определение

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

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

flex-direction =
  row             | (en-US)
  row-reverse     | (en-US)
  column          | (en-US)
  column-reverse

```

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

### Использование column-reverse и row-reverse

#### HTML

```html
<h4>Пример flex-direction: column-reverse</h4>
<div id="col-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
<h4>Пример flex-direction: row-reverse</h4>
<div id="row-rev" class="content">
  <div class="box red">A</div>
  <div class="box lightblue">B</div>
  <div class="box yellow">C</div>
</div>
```

#### CSS

```css
.content {
  width: 200px;
  height: 200px;
  border: 1px solid #c3c3c3;
  display: flex;
}

.box {
  width: 50px;
  height: 50px;
}

#col-rev {
  flex-direction: column-reverse;
}

#row-rev {
  flex-direction: row-reverse;
}

.red {
  background-color: red;
}

.lightblue {
  background-color: lightblue;
}

.yellow {
  background-color: yellow;
}
```

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

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

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

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

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

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

* CSS `flex-flow` — краткая запись CSS-свойств `flex-direction` и `flex-wrap`.
* Руководство по CSS Flexbox: *Основные идеи Flexbox*
* Руководство по CSS Flexbox: *Упорядочивание flex-элементов (en-US)*


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

overscroll-behavior
===================

CSS-свойство **`overscroll-behavior`** — это сокращение для свойств `overscroll-behavior-x` (en-US) и `overscroll-behavior-y` (en-US), которые позволяют управлять поведением прокрутки при достижении границы области прокрутки.

```css
/\* Ключевые слова \*/
overscroll-behavior: auto; /\* по умолчанию \*/
overscroll-behavior: contain;
overscroll-behavior: none;

/\* Двойное значение \*/
overscroll-behavior: auto contain;

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

По умолчанию мобильные браузеры, как правило, обеспечивают эффект «отскока» или даже обновляют страницу при достижении её верхней или нижней части (или другой области прокрутки). Возможно, вы также замечали, что когда поверх страницы с прокруткой расположено диалоговое окно с прокруткой, то при достижении границы прокрутки диалогового окна нижележащая страница начинает прокручиваться. Это называется цепочкой прокрутки (scroll chaining, англ.)

В некоторых случаях такое поведение нежелательно. Вы можете использовать `overscroll-behavior`, чтобы избавиться от нежелательных цепочек прокрутки и поведения страниц браузера по принципу «потяните, чтобы обновить» (pull to refresh, англ.), характерного, например, для приложений Facebook и Twitter.

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | не заменяемые блочные и inline-block элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `overscroll-behavior-x` (en-US): как указано
* `overscroll-behavior-y` (en-US): как указано
 |
| Animation type | discrete |

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

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

Два ключевых слова определяют значение `overscroll-behavior` по осям `x` и `y` соответственно. Если задано только одно значение, то предполагается, что и `x`, и `y` одинаковы.

### Значения

`auto`

Поведение по умолчанию.

`contain`

Поведение для `overscroll-behavior` применяется внутри элемента, для которого установлено это значение (например, эффекты «отскока» или обновления), но не возникают цепочки прокрутки для соседних областей прокрутки, например, нижележащие элементы не будут прокручиваться.

`none`

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

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

overscroll-behavior =
  [ (en-US) contain | (en-US) none | (en-US) auto ] (en-US){1,2} (en-US)

```

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

В нашем примере overscroll-поведения (см. также код по ссылке ) представлен полностраничный список поддельных контактов и диалоговое окно с чатом.

![](/ru/docs/Web/CSS/overscroll-behavior/example.png)

Обе эти области прокручиваются; обычно, если вы прокручиваете окно чата до тех пор, пока не достигнете границы прокрутки, нижележащее окно контактов тоже начнёт прокручиваться, что нежелательно. Предотвратить такое поведение можно, используя `overscroll-behavior-y` (`overscroll-behavior` также подойдет) для окна чата, как показано ниже:

```css
.messages {
  height: 220px;
  overflow: auto;
  overscroll-behavior-y: contain;
}
```

Мы также хотим избавиться от стандартного overscroll-эффекта при прокрутке контактов вверх или вниз (например, Chrome на Android обновляет страницу при прокрутке за пределы верхней границы). Это можно предотвратить, установив для элемента `<body>` значение `overscroll-behavior: none`:

```css
body {
  margin: 0;
  overscroll-behavior: none;
}
```

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

| Specification |
| --- |
| CSS Overscroll Behavior Module Level 1 # overscroll-behavior-properties |

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

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

См. также
---------

* Take control of your scroll: customizing pull-to-refresh and overflow effects


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

Способ разметки
===============

CSS **способ разметки** (или *раскладки,* или англ. *layout*) — это алгоритм определения позиции и размеров блоков, основанный на способе, которым они взаимодействуют с родственными блоками. Существует несколько типов разметки:

* *Обычная (Normal Flow)* — все элементы являются частью обычного потока до тех пор, пока вы не переопределите это каким-либо образом. Обычный *layout* включает в себя *блочную раскладку*, созданную для расположения отдельных блоков, таких как параграфы, и *линейную*, — для строчных элементов;
* *Табличная*, спроектированная для расположения таблиц;
* *Float layout* — для возможности обозначить элементы *плавающими.* Такой элемент начинает позиционироваться слева или справа относительно содержимого обычного потока, элементы которого начинают обтекать него;
* \_Позиционированная (en-US) \_— для позиционирования элементов без особого взаимодействия с другими элементами;
* *Множественные столбцы (en-US)* — для расположения контента колонками, как в газетах;
* *Флексбокс (CSS Flexible Box Layout)* — для расположения сложных страниц, которые плавно могут изменять свой размер;
Экспериментальная возможность
* *Сеточная* — для расположения элементов относительно фиксированной сетки.
Экспериментальная возможность

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

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

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


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

grid-template
=============

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

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

* Learn more
* See full compatibility
* Report feedback
Сокращённое CSS-свойство **`grid-template`** определяет колонки, ряды (en-US) и области (en-US) грид-раскладки.

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

Составные свойства
------------------

Это свойство является сокращённой формой записи для следующих CSS-свойств:

* `grid-template-areas`
* `grid-template-columns`
* `grid-template-rows`
Синтаксис
---------

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

/\* Значения в формате grid-template-rows / grid-template-columns \*/
grid-template: 100px 1fr / 50px 1fr;
grid-template: auto 1fr / auto 1fr auto;
grid-template: [linename] 100px / [columnname1] 30% [columnname2] 70%;
grid-template: fit-content(100px) / fit-content(40%);

/\* Значения в формате grid-template-areas grid-template-rows / grid-template-columns \*/
grid-template:
  "a a a"
  "b b b";
grid-template:
  "a a a" 20%
  "b b b" auto;
grid-template:
  [header-top] "a a a" [header-bottom]
  [main-top] "b b b" 1fr [main-bottom]
  / auto 1fr auto;

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

### Значения

`none`

Это ключевое задаёт значение `none` для всех трёх связанных свойств, что означает отсутствие явно заданной грид-раскладки. Соответственно, грид-области будут неименованными. Ряды и колонки будут создаваться неявным образом, а их размер определяться свойствами `grid-auto-rows` (en-US) и `grid-auto-columns` (en-US).

`<'grid-template-rows'> / <'grid-template-columns'>`

Задаёт указанные значения для `grid-template-rows` и `grid-template-columns`, а для свойства `grid-template-areas` ― значение `none`.

`[ <line-names>? <string> <track-size>? <line-names>? ]+ [ / <explicit-track-list> ]?`

Перечисленные строки задают свойство `grid-template-areas`, значения после каждой строки устанавливают размеры грид-полос для свойства `grid-template-rows` (либо `auto` в случае их отсутствия), объединяя именованные грид-линии, расположенные до и после каждого размера, далее определяется `grid-template-columns` значениями, расположенными после слеша (либо `none` в случае их отсутствия).

**Примечание:** при перечислении грид-полос нельзя использовать функцию `repeat()` (en-US), поскольку предполагается, что ряды и колонки будут располагаться вместе другом с другом в стиле "ASCII-рисунков".

**Примечание:** сокращённое свойство `grid` имеет тот же самый формат значений, но также сбрасывает неявные грид-свойства к их первоначальным значениям. Используйте `grid` (в отличие от `grid-template`), чтобы предотвратить каскадирование этих значений по отдельности.

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `grid-template-columns`: `none`
* `grid-template-rows`: `none`
* `grid-template-areas`: `none`
 |
| Применяется к | сеточные контейнеры |
| Наследуется | нет |
| Проценты | как и у каждого из подсвойств этого свойства:* `grid-template-columns`: относятся к соответствующему размеру области содержимого
* `grid-template-rows`: относятся к соответствующему размеру области содержимого
 |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `grid-template-columns`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
* `grid-template-rows`: как указано, но с относительной длиной, конвертируемой в абсолютные длины
* `grid-template-areas`: как указано
 |
| Animation type | как и у каждого из подсвойств этого свойства:* `grid-template-columns`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-rows`: simple list of length, percentage, or calc, provided the only differences are in the values of the length, percentage, or calc components in the list
* `grid-template-areas`: discrete
 |

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

grid-template =
  none                                                | (en-US)
  [ (en-US) <'grid-template-rows'> / <'grid-template-columns'> ] (en-US)  | (en-US)
  [ (en-US) <line-names>? (en-US) <string> (en-US) <track-size>? (en-US) <line-names>? (en-US) ] (en-US)+ (en-US) [ (en-US) / <explicit-track-list> ] (en-US)? (en-US)

<line-names> =
  '[' <custom-ident>\* (en-US) ']'

<track-size> =
  <track-breadth>                                   | (en-US)
  minmax( <inflexible-breadth> , <track-breadth> )  | (en-US)
  fit-content( <length-percentage [0,∞]> )

<explicit-track-list> =
  [ (en-US) <line-names>? (en-US) <track-size> ] (en-US)+ (en-US) <line-names>? (en-US)

<track-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  <flex [0,∞]>               | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

<inflexible-breadth> =
  <length-percentage [0,∞]>  | (en-US)
  min-content                | (en-US)
  max-content                | (en-US)
  auto

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

```

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

### Создание грид-раскладки

#### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 200px;
  grid-template:
    [header-left] "head head" 30px [header-right]
    [main-left] "nav main" 1fr [main-right]
    [footer-left] "nav foot" 30px [footer-right]
    / 120px 1fr;
}

header {
  background-color: lime;
  grid-area: head;
}

nav {
  background-color: lightblue;
  grid-area: nav;
}

main {
  background-color: yellow;
  grid-area: main;
}

footer {
  background-color: red;
  grid-area: foot;
}
```

#### HTML

```html
<section id="page">
  <header>Шапка</header>
  <nav>Навигация</nav>
  <main>Основной контент</main>
  <footer>Подвал</footer>
</section>
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # explicit-grid-shorthand |

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

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

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

* Связанные CSS-свойства: `grid-template-rows`, `grid-template-columns`, `grid-template-areas`
* Руководство по грид-раскладке: *Расположение элементов по грид-линиям с помощью CSS Grid*
* Руководство по грид-раскладке: *Шаблоны грид-областей - сокращённое определение грида*
* Обучающее видео: *Grid Template shorthand*


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

:active
=======

Псевдокласс **`:active`** соответствует элементу в момент, когда он активируется пользователем. Он позволяет странице среагировать, когда элемент активируется. Взаимодействие элемента с мышью - это, как правило, время между нажатием и отпусканием пользователем кнопки мыши.

```css
/\* Любой элемент <a>, который будет активирован \*/
a:active {
  color: red;
}
```

Псевдокласс `:active` чаще используется с элементами `<a>` и `<button>`, но может применяться и к другим элементам – например элементам форм.

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

**Примечание:** В системах с много-кнопочными мышами, CSS 3 указывает, что псевдокласс `:active` должен применяться только к первой кнопке; для праворуких мышей - это обычно самая левая кнопка.

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

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

### Активные ссылки

#### HTML

```html
<p>
  Этот абзац содержит ссылку:
  <a href="#">Эта ссылка будет окрашена в красный, когда вы нажмёте на неё.</a>
  У абзаца фон станет серым при нажатии на него или на ссылку.
</p>
```

#### CSS

```css
/\* Непосещённые ссылки \*/
a:link {
  color: blue;
}
/\* Посещённые ссылки \*/
a:visited {
  color: purple;
}
/\* Ссылки при наведении \*/
a:hover {
  background: yellow;
}
/\* Активные ссылки \*/
a:active {
  color: red;
}

/\* Активные абзацы \*/
p:active {
  background: #eee;
}
```

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

### Активные элементы формы

#### HTML

```html
<form>
  <label for="my-button">Моя кнопка: </label>
  <button id="my-button" type="button">
    Попробуй Нажать Меня или Мою подсказку!
  </button>
</form>
```

#### CSS

```css
form :active {
  color: red;
}

form button {
  background: white;
}
```

#### Result

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

| Specification |
| --- |
| HTML Standard # selector-active |
| Selectors Level 4 # the-active-pseudo |

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

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

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

* Псевдоклассы, связанные с ссылками: `:link`, `:visited` и `:hover`.


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

:only-child
===========

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

CSS псевдокласс `:only-child` находит любой элемент, являющийся единственным потомком родителя. Это тоже, что и `:first-child:last-child` или `:nth-child(1):nth-last-child(1)`, но с меньшей специфичностью.

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

parent child:only-child {
  property: value;
}
```

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

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

```css
span:only-child {
  color: red;
}
```

```html
<div>
  <span>Этот span единственный ребёнок своего папы:(</span>
</div>

<div>
  <span>Этот span один из потомков родителя</span>
  <span>Этот span один из детей отца</span>
</div>
```

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

### Пример со списком

```css
li li {
  list-style-type: disc;
}
li:only-child {
  color: #6699ff;
  font-style: italic;
  list-style-type: square;
}
```

```html
<ol>
  <li>
    Первый
    <ul>
      <li>Это единственный ребёнок</li>
    </ul>
  </li>
  <li>
    Второй
    <ul>
      <li>Этот список с двумя элементами</li>
      <li>Этот список с двумя элементами</li>
    </ul>
  </li>
  <li>
    Третий
    <ul>
      <li>Этот список с тремя элементами</li>
      <li>Этот список с тремя элементами</li>
      <li>Этот список с тремя элементами</li>
    </ul>
  </li>
  <ol></ol>
</ol>
```

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

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

| Specification |
| --- |
| Selectors Level 4 # only-child-pseudo |

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

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


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

height
======

CSS атрибут **`height`** позволят обозначать высоту элемента. По умолчанию, свойство определяет высоту внутренней области. Если `box-sizing` имеет значение `border-box`, то свойство будет определять высоту области рамки.

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

Атрибуты `min-height` и `max-height` при добавлении меняют значение `height`.

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

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

/\* <length> значения \*/
height: 120px;
height: 10em;

/\* <percentage> значения \*/
height: 75%;

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

### Значения

`<length>`

Высота - фиксированная величина.

`<percentage>`

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

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

Если присутствует, то предшествующие `<length>` или `<percentage>` применяются к области рамки элемента.

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

Если присутствует, то предшествующие `<length>` or `<percentage>` применяются к внутренней области элемента.

`auto`

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

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

Использует `fill-available` размер строки или `fill-available` размер блока, в зависимости от способа разметки.

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

Внутренняя максимальная предпочтительная высота.

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

Внутренняя минимальная предпочтительная высота.

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

Высота содержащего блока минус вертикальные `margin`, border и `padding`.

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

Наибольшее из:

* внутренняя минимальная высота
* меньшая из внутренней предпочтительной высоты и доступной высоты

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

height =
  auto                                      | (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>

```

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

### HTML

```html
<div id="taller">Я 50 пикселей в высоту.</div>
<div id="shorter">Я 25 пикселей в высоту.</div>
<div id="parent">
  <div id="child">Моя высота - половина от высоты родителя.</div>
</div>
```

### CSS

```css
div {
  width: 250px;
  margin-bottom: 5px;
  border: 2px solid blue;
}

#taller {
  height: 50px;
}

#shorter {
  height: 25px;
}

#parent {
  height: 100px;
}

#child {
  height: 50%;
  width: 75%;
}
```

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

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

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

* 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 3 # preferred-size-properties |
| CSS Box Sizing Module Level 4 # sizing-values |

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

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

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

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

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


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

paint-order
===========

CSS-свойство **`paint-order`** позволяет вам контролировать порядок, в котором отрисовываются заливка и обводка (и нарисованные маркеры) текстового содержимого и фигур.

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

```css
/\* Нормальный \*/
paint-order: normal;

/\* Единичное значение \*/
paint-order: stroke; /\* отрисовывает сначала обводку, затем заливку и маркеры \*/
paint-order: markers; /\* отрисовывает сначала маркеры, затем заливку и обводку \*/

/\* Множественные значения \*/
paint-order: stroke fill; /\* отрисовывает сначала обводку, затем заливку, затем маркеры \*/
paint-order: markers stroke fill; /\* отрисовывает маркеры, затем обводку, затем заливку \*/

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

Если значение не указано, значением по умолчанию является следующий порядок `fill`, `stroke`, `markers`.

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

>
> **Note:** в контексте этого свойства, маркеры отрисовываются только при рисовании форм SVG, включающих использование свойств `marker-*` (например `marker-start` (en-US)) и элемента `<marker>` (en-US). Они не применяются к тексту HTML, в этом случае вы можете определить только порядок `stroke` и `fill`.
>
>
>

### Значения

`normal`

Окрасит различные части в обычном порядке.

`stroke`,
 `fill`,
 `markers`

Указываются некоторые или все эти значения в том порядке, в котором вы хотите увидеть отрисовку.

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

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

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

paint-order =
  normal                         | (en-US)
  [ (en-US) fill || (en-US) stroke || (en-US) markers ] (en-US)

```

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

### Изменение порядка отрисовки обводки и заливки на противоположный

#### SVG

```html
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="200">
  <text x="10" y="75">stroke in front</text>
  <text x="10" y="150" class="stroke-behind">stroke behind</text>
</svg>
```

#### CSS

```css
text {
  font-family: sans-serif;
  font-size: 50px;
  font-weight: bold;
  fill: black;
  stroke: red;
  stroke-width: 4px;
}

.stroke-behind {
  paint-order: stroke fill;
}
```

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

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

| Specification |
| --- |
| Scalable Vector Graphics (SVG) 2 # PaintOrder |

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

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

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

* CSS Tricks: paint-order


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

CSS Animations
==============

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

**CSS Анимации** - это модуль CSS, который позволяет анимировать изменение значений CSS-свойств, используя опорные кадры (*keyframes*). Для управления поведением таких анимаций можно задать хронометражную функцию, длительность, количество повторов и другие атрибуты.

Reference
---------

### Свойства

* `animation`
* `animation`
* `animation-delay`
* `animation-direction`
* `animation-duration`
* `animation-fill-mode`
* `animation-iteration-count`
* `animation-name`
* `animation-play-state`
* `animation-timing-function`
### @-правила

* `@keyframes` (en-US)
Guides
------

Использование CSS-анимаций

Пошаговое руководство по созданию анимаций с помощью CSS. Статья описывает все касающиеся анимации CSS-свойства и @-правила и объясняет, как они взаимодействуют друг с другом.

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

| Specification |
| --- |
| CSS Animations Level 2  |
| CSS Animations Level 1  |

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

{{Compat}}See also
--------

* Related to CSS Animations, CSS Transitions (en-US) can trigger animations on user actions.


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

margin-inline-end
=================

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

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

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

Syntax
------

```css
/\* <length> values \*/
margin-inline-end: 10px; /\* An absolute length \*/
margin-inline-end: 1em; /\* relative to the text size \*/
margin-inline-end: 5%; /\* relative to the nearest block container's width \*/

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

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

It relates to `margin-block-start` (en-US), `margin-block-end` (en-US), and `margin-inline-start`, which define the other margins of the element.

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

### Values

The `margin-inline-end` property takes the same values as the `margin-left` property.

### Formal syntax
```

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

```

Example
-------

### HTML

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

### CSS

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

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

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

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

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

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

See also
--------

* `margin-inline-start`
* The mapped physical properties: `margin-top`, `margin-right`, `margin-bottom`, and `margin-left`
* `writing-mode`, `direction`, `text-orientation` (en-US)


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

@font-feature-values
====================

CSS @-правило **`@font-feature-values`** позволяет использовать общее имя в свойстве `font-variant-alternates` (en-US) для функций, которые по разному активируются в OpenType. Это может помочь упростить ваш CSS при использовании нескольких шрифтов.

```css
/\* Правило для "хорошего стиля" в Font One \*/
@font-feature-values Font One {
  @styleset {
    nice-style: 12;
  }
}

/\* Правило для "хорошего стиля" в Font Two \*/
@font-feature-values Font Two {
  @styleset {
    nice-style: 4;
  }
}

…

/\* Применение правила с единственным объявлением \*/
.nice-look {
  font-variant-alternates: styleset(nice-style);
}
```

Правило `@font-feature-values` может использоваться как на вернём уровне вашего CSS так и внутри любого условного CSS-правила.

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

### Блоки значений функций

`@swash`

Устанавливает имя функции, которая будет работать с функциональной записью `swash()` (en-US) для `font-variant-alternates` (en-US). Определение значения функции swash допускает только одно значение: `ident1: 2` является действительным, но `ident2: 2 4` нет.

`@annotation`

Устанавливает имя функции, которая будет работать с функциональной записью `annotation()` (en-US) для `font-variant-alternates` (en-US). Определение значения функции допускает только одно значение: `ident1: 2` действительным , но `ident2: 2 4` нет.

`@ornaments`

Устанавливает имя функции, которая будет работать с функциональной записью `ornaments()` (en-US) для `font-variant-alternates` (en-US). Определение значения функции ornaments допускает только одно значение: `ident1: 2` является действительным, но `ident2: 2 4` нет.

`@stylistic`

Specifies a feature name that will work with the `stylistic()` (en-US) functional notation of `font-variant-alternates` (en-US). A stylistic feature value definition allows only one value: `ident1: 2` is valid, but `ident2: 2 4` isn't.

`@styleset`

Specifies a feature name that will work with the `styleset()` (en-US) functional notation of `font-variant-alternates` (en-US). A stylset feature value definition allows an unlimited number of values: `ident1: 2 4 12 1` maps to the OpenType values `ss02`, `ss04`, `ss12`, and `ss01`. Note that values higher than `99` are valid, but don't map to any OpenType values and are ignored.

`@character-variant`

Specifies a feature name that will work with the `character-variant()` (en-US) functional notation of `font-variant-alternates` (en-US). A character-variant feature value definition allows either one or two values: `ident1: 3` maps to `cv03=1`, and `ident2: 2 4` maps to `cv02=4`, but `ident2: 2 4 5` is invalid.

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

@font-feature-values =
  @font-feature-values <family-name># (en-US) { <declaration-rule-list> }

<family-name> =
  <string> (en-US)         | (en-US)
  <custom-ident>+ (en-US)

```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-feature-values |

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

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

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

* Свойство `font-variant-alternates` (en-US) которое использует значения, определённые этим правилом.


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

:any-link
=========

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

Селектор псевдокласса CSS **`:any-link`** представляет собой элемент, который действует как исходный якорь гиперссылки, независимо от того, была ли она посещена. Другими словами, он соответствует всем элементам `<a>`, `<area>`, или `<link>`, которые имеют атрибут `href`. Таким образом, он соответствует всем элементам, которые используют `:link` или `:visited`.

```css
/\* Выбирает любой элемент, который будет соответствовать:link или :visited \*/
:any-link {
  color: green;
}
```

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

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

### HTML

```html
<a href="https://example.com">External link</a><br />
<a href="#">Internal target link</a><br />
<a>Placeholder link (won't get styled)</a>
```

### CSS

```css
a:any-link {
  border: 1px solid blue;
  color: orange;
}

/\* WebKit browsers \*/
a:-webkit-any-link {
  border: 1px solid blue;
  color: orange;
}
```

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

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

| Specification |
| --- |
| Selectors Level 4 # the-any-link-pseudo |

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

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

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

* Создание гиперссылок
* Соответствует HTML-элементам: `<a>`, `<area>` и `<link>` с атрибутом `href`
* Похожие CSS селекторы:
    + `:visited`
    + `:link`


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

min-height
==========

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

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

Высота элемента принимает значение `min-height` всякий раз, когда `min-height` больше чем `max-height` или `height`.

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

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

/\* <length> значения \*/
min-height: 3.5em;

/\* <percentage> значения \*/
min-height: 10%;

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

### Значения

`<length>`

Минимальная высота выражается как `<length>`. Отрицательные значения делают свойство недействительным.

`<percentage>`

Минимальная высота выражается как `<percentage>` от высоты родительского блока. Отрицательные значения делают свойство недействительным.

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

`auto`

Минимальная высота для flex-элементов по умолчанию, предоставляет более разумное значение по умолчанию, чем 0 для других способов разметки.

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

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

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

Внутренняя минимальная высота.

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

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

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

Согласно CSS3 Box, это синоним `min-content`. CSS3 Sizing определяет более сложный алгоритм, но ни один браузер не реализует его даже экспериментальным путём.

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

min-height =
  auto                                      | (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>

```

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

```css
table {
  min-height: 75%;
}

form {
  min-height: 0;
}
```

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

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

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

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

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

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

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


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

animation
=========

CSS свойство **`animation`** это короткая запись для `animation-name`, `animation-duration`, `animation-timing-function`, `animation-delay`, `animation-iteration-count`, `animation-direction`, `animation-fill-mode` и `animation-play-state`.

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

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `animation-name`: `none`
* `animation-duration`: `0s`
* `animation-timing-function`: `ease`
* `animation-delay`: `0s`
* `animation-iteration-count`: `1`
* `animation-direction`: `normal`
* `animation-fill-mode`: `none`
* `animation-play-state`: `running`
* `animation-timeline` (en-US): `auto`
 |
| Применяется к | все элементы |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `animation-name`: как указано
* `animation-duration`: как указано
* `animation-timing-function`: как указано
* `animation-delay`: как указано
* `animation-direction`: как указано
* `animation-iteration-count`: как указано
* `animation-fill-mode`: как указано
* `animation-play-state`: как указано
* `animation-timeline` (en-US): a list, each item either a case-sensitive CSS identifier or the keywords `none`, `auto`
 |
| Animation type | Not animatable |

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

```css
/\* @keyframes duration | timing-function | delay |
 iteration-count | direction | fill-mode | play-state | name \*/
animation: 3s ease-in 1s 2 reverse both paused slidein;

/\* @keyframes duration | timing-function | delay | name \*/
animation: 3s linear 1s slidein;

/\* @keyframes duration | name \*/
animation: 3s slidein;
```

Порядок важен в каждом определении анимации: первое значение, которое может быть проанализировано как `<time>` присваивается `animation-duration`, и второй назначен `animation-delay`.

Note that order is also important within each animation definition for distinguishing `animation-name` values from other keywords. When parsing, keywords that are valid for properties other than `animation-name` whose values were not found earlier in the shorthand must be accepted for those properties rather than for `animation-name`. Furthermore, when serializing, default values of other properties must be output in at least the cases necessary to distinguish an `animation-name` that could be a value of another property, and may be output in additional cases.

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

animation =
  <single-animation># (en-US)

<single-animation> =
  <time [0s,∞]>                       || (en-US)
  <easing-function>                   || (en-US)
  <time>                              || (en-US)
  <single-animation-iteration-count>  || (en-US)
  <single-animation-direction>        || (en-US)
  <single-animation-fill-mode>        || (en-US)
  <single-animation-play-state>       || (en-US)
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<single-animation-iteration-count> =
  infinite        | (en-US)
  <number [0,∞]>

<single-animation-direction> =
  normal             | (en-US)
  reverse            | (en-US)
  alternate          | (en-US)
  alternate-reverse

<single-animation-fill-mode> =
  none       | (en-US)
  forwards   | (en-US)
  backwards  | (en-US)
  both

<single-animation-play-state> =
  running  | (en-US)
  paused

<keyframes-name> =
  <custom-ident>  | (en-US)
  <string> (en-US)

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number>               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage>{1,2} (en-US)

```

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

Посмотрите примеры CSS-анимаций.

### Cylon Eye

Учитывая все специфичные для браузеров префиксы, вот анимация цилиндрического глаза, включающая линейные градиенты и анимацию, которая работает во всех основных браузерах:

```html
<div class="view\_port">
  <div class="polling\_message">Listening for dispatches</div>
  <div class="cylon\_eye"></div>
</div>
```

```css
.polling\_message {
  color: white;
  float: left;
  margin-right: 2%;
}

.view\_port {
  background-color: black;
  height: 25px;
  width: 100%;
  overflow: hidden;
}

.cylon\_eye {
  background-color: red;
  background-image: -webkit-linear-gradient(
    left,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  background-image: -moz-linear-gradient(
    left,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  background-image: -o-linear-gradient(
    left,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  background-image: linear-gradient(
    to right,
    rgba(0, 0, 0, 0.9) 25%,
    rgba(0, 0, 0, 0.1) 50%,
    rgba(0, 0, 0, 0.9) 75%
  );
  color: white;
  height: 100%;
  width: 20%;

  -webkit-animation: 4s linear 0s infinite alternate move_eye;
  -moz-animation: 4s linear 0s infinite alternate move_eye;
  -o-animation: 4s linear 0s infinite alternate move_eye;
  animation: 4s linear 0s infinite alternate move_eye;
}

@-webkit-keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
@-moz-keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
@-o-keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
@keyframes move\_eye {
  from {
    margin-left: -20%;
  }
  to {
    margin-left: 100%;
  }
}
```

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

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

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

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

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

* Использование CSS-анимации
* JavaScript `AnimationEvent` API


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

bottom
======

CSS свойство **`bottom`** частично определяет вертикальную позицию позиционируемого элемента. Оно не влияет на непозиционируемые элементы (т.е. **`bottom`** не применится, если задано `position: static`).

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

Эффект свойства `bottom` зависит от того, как позиционируется элемент (то есть от значения свойства `position`):

* Когда задано `position: absolute` или `fixed` — свойство `bottom` устанавливает расстояние между нижним краем элемента и нижним краем содержащего его блока.
* Когда задано `position: relative` — свойство `bottom` устанавливает расстояние, на которое нижний край элемента перемещается выше его обычной позиции.
* Когда задано `position: sticky` — свойство `bottom` работает так, как при `position: relative` во время нахождения элемента внутри области просмотра, и как `position: fixed` вне области просмотра.
* Когда задано `position: static` — свойство `bottom` *не имеет никакого эффекта*.

Когда заданы оба свойства `top` и `bottom`, а свойство `height` не задано, `auto` или равно `100%`, то оба свойства `top` и `bottom` учитываются. Если свойство `height` задано, то свойство `top` будет учтено, а `bottom` — проигнорировано.

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

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

/\* Значения величин \*/
bottom: 3px;
bottom: 2.4em;

/\* Процентные значения от высоты родительского блока \*/
bottom: 10%;

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

### Значения

`<length>`

Отрицательная, нулевая или положительная величина, которая представляет:

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

`<percentage>`

Процент от высоты родительского блока.

`auto`

Ключевое слово, которое указывает, что:

* для *абсолютно спозиционированных элементов* — позиция элемента опирается на свойство `top`, пока `height: auto` обрабатывается как высота в зависимости от содержимого; если так же и `bottom: auto`, то элемент располагается так же, как при статическом позиционировании.
* для *относительно спозиционированных элементов* — расстояние элемента от его обычной позиции основано на свойстве `top`; если значение `top` также `auto`, элемент вообще не перемещается по вертикали.

`inherit`

Это ключевое слово указывает, что значение будет соответствовать вычисленному значению родительского блока (необязательно непосредственного родителя). Вычисляемое значение обрабатывается так же, как `<length>`, `<percentage>` или ключевое слово `auto`.

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

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

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

```

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

Этот пример демонстрирует разницу в поведении свойства `bottom`, когда `position` является `absolute` и `fixed`.

### HTML

```html
<h2>Эксперимент</h2>
<p>
  Здесь<br />мы<br />набираем<br />побольше<br />высоты<br />для<br />вящей<br />наглядности<br />нашего<br />скромного,<br />но<br />очень<br />убедительного<br />эксперимента.<br />-
  Вот.
</p>
<div class="fixed"><p>Я фиксирован</p></div>
<div class="absolute"><p>Я абсолютен</p></div>
```

### CSS

```css
p {
  font-size: 30px;
  line-height: 2em;
}

div {
  width: 48%;
  text-align: center;
  background: rgba(55, 55, 55, 0.4);
  border: 1px solid blue;
}

.absolute {
  position: absolute;
  bottom: 0;
  left: 0;
}

.fixed {
  position: fixed;
  bottom: 0;
  right: 0;
}
```

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

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

| Specification |
| --- |
| CSS Positioned Layout Module Level 3 # insets |

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

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

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

* `position`, `top`, `left` (en-US), `right`


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

font-variant-ligatures
======================

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

**Свойство CSS** **`Font-variant-ligatures`** **контролирует, какие лигатуры и контекстные формы используются в текстовом содержимом элемента, к которому применяется. Это повышает гармоничность форм получаемого в результате текста.**

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

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

```css
font-variant-ligatures: normal;
font-variant-ligatures: none;
font-variant-ligatures: common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: no-common-ligatures; /\* <common-lig-values> \*/
font-variant-ligatures: discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: no-discretionary-ligatures; /\* <discretionary-lig-values> \*/
font-variant-ligatures: historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: no-historical-ligatures; /\* <historical-lig-values> \*/
font-variant-ligatures: contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: no-contextual; /\* <contextual-alt-values> \*/
font-variant-ligatures: contextual; /\* <no-historical-ligatures> <common-ligatures> \*/

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

### Значения

`normal`

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

`none`

Это ключевое слово устанавливает, что все лигатуры и контекстные формы отключены, даже распространённые.

<*common-lig-values>*

Эти значения контролируют наиболее распространённые лигатуры, такие как лигатуры для сочетаний `fi`, `ffi`, `th` или подобных. Они относятся к значениям `liga` и `clig` в OpenType. Допустимы два значения:

* `common-ligatures` активирует эти лигатуры. Обратите внимание, что ключевое слово `normal` активирует лигатуры.
* `no-common-ligatures` отключает эти лигатуры.

<*discretionary-lig-values*>

Эти значения управляют определёнными лигатурами, специфичными для шрифта и определяемыми дизайнером шрифта. Они соответствуют значениям OpenType `hlig`. Доступны два значения:

* `discretionary-ligatures` активирует данные лигатуры.
* `no-discretionary-ligatures` деактивирует лигатуры. Обратите внимание, обычно, ключевое слово `normal` также деактивирует лигатуры.

*<historical-lig-values>*

(ß) Эти значения контролируют лигатуры, которые исторически использовались в старых книгах, например, немецкий *tz* ("tz диаграф", прим. перев.). Они соответствуют значениям OpenType `hlig`. Доступны два значения:

* `historical-ligatures` активирует данные лигатуры.
* `no-historical-ligatures` деактивирует лигатуры. Обратите внимание, обычно, ключевое слово `normal` также деактивирует лигатуры.

*<contextual-alt-values>*

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

* `contextual` указывает, что должны использоваться контекстные альтернативы. Обратите внимание, что ключевое слово `normal` обычно также активирует лигатуры.
* `no-contextual` предотвращает их использование.

### Соответствующий правилам синтаксис
```

font-variant-ligatures =
  normal                                              | (en-US)
  none                                                | (en-US)
  [ (en-US) <common-lig-values> || (en-US) <discretionary-lig-values> || (en-US) <historical-lig-values> || (en-US) <contextual-alt-values> ] (en-US)

<common-lig-values> =
  common-ligatures     | (en-US)
  no-common-ligatures

<discretionary-lig-values> =
  discretionary-ligatures     | (en-US)
  no-discretionary-ligatures

<historical-lig-values> =
  historical-ligatures     | (en-US)
  no-historical-ligatures

<contextual-alt-values> =
  contextual     | (en-US)
  no-contextual

```

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

```css
p {
  font-variant-ligatures: none;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-variant-ligatures-prop |

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

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


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

Выравнивание полей CSS
======================

Модуль CSS Box Alignment определяет CSS-функции, которые относятся к выравниванию ящиков в различных моделях макета CSS: макет блока, макет таблицы, гибкая макет и макет сетки. Модуль нацелен на создание согласованного метода выравнивания по всем CSS. В этом документе описываются общие понятия, содержащиеся в спецификации.

**Примечание:** Документация для каждого метода макета будет подробно описана, как там применяется шкала выравнивания.

Старые методы выравнивания
--------------------------

У CSS традиционно были очень ограниченные возможности выравнивания. Мы могли выровнять текст, используя `text-align`, центральные блоки, используя auto `margin`s, а в макетах таблицы или встроенного блока, используя `vertical-align` свойство. Выравнивание текста теперь покрывается модулями Inline Layout и CSS Text, и впервые в Box Alignment мы имеем полные возможности горизонтального и вертикального выравнивания.

Если вы изначально узнали Flexbox, вы можете считать эти свойства частью спецификации Flexbox и некоторые из свойств действительно перечислены в Level 1 Flexbox. Однако в спецификации отмечается, что спецификация Box Alignment должна рассматриваться, поскольку она может добавить дополнительные возможности по сравнению с тем, что в настоящее время находится в Flexbox.

Основные примеры
----------------

Следующие примеры демонстрируют, как некоторые из Box Alignment Properties применяются в Grid and Flexbox.

### Пример выравнивания раскладки сетки CSS

В этом примере с использованием Grid Layout, в контейнере сетки есть дополнительное пространство после прокладки фиксированных дорожек ширины на основной оси. Это пространство распределяется с помощью `justify-content`. На блочной (поперечной) оси выравнивание элементов внутри их областей сетки контролируется с помощью `align-items`. Первый элемент переопределяет значение элементов выравнивания, заданное в группе, путём установки `align-self` в центр.

### Пример выравнивания Flexbox

В этом примере три элемента гибкости выровнены по главной оси с использованием `justify-content` и на поперечной оси с использованием `align-items`. Первый элемент переопределяет `align-items`, заданные в группе `align-self` по `center`.

Ключевые понятия и терминология
-------------------------------

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

### Связь с режимами записи

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

### Два измерения выравнивания

При использовании свойств выравнивания ячеек вы выровняете содержимое по одной из двух осей - inline (или main) оси и block (или cross) оси. Внутренняя ось - это ось, по которой используются слова в потоке предложения в режиме записи - для английского языка, например, встроенная ось горизонтальна. Ось блока - это ось, вдоль которой выложены блоки, такие как элементы абзаца, и проходит по оси Inline.

![](/ru/docs/Web/CSS/CSS_box_alignment/two-axes.png)
![](/ru/docs/Web/CSS/CSS_box_alignment/two-axes.png)

При выравнивании элементов на встроенной оси вы будете использовать свойства, начинающиеся с `justify-`:

* `justify-items`
* `justify-self` (en-US)
* `justify-content`

При выравнивании элементов на оси блока вы будете использовать свойства, которые начинаются с `align-`:

* `align-items`
* `align-self`
* `align-content`

Flexbox добавляет дополнительное усложнение в том, что указанное выше верно, когда `flex-direction` установлено в `row`. Свойства меняются местами, когда flexbox установлен в `column`. Поэтому при работе с flexbox легче думать о главной и поперечной оси, а не о линии и блоке. Свойства `justify-` всегда используются для выравнивания по главной оси, `align-` на поперечной оси.

### The alignment subject

**Объект выравнивания** - это то, что выровнено. Для `justify-self`, или `align-self`, или при настройке этих значений как группы с `justify-items` или `align-items` это будет поле элемента, в котором используется это свойство. Свойства `justify-content` и `align-content` различаются для каждого метода макета.

### The alignment container

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

На приведённом ниже рисунке показан контейнер выравнивания с двумя объектами выравнивания внутри.

![](/ru/docs/Web/CSS/CSS_box_alignment/align-container-subjects.png)

### Fallback alignment

Если вы установите выравнивание, которое не может быть выполнено, тогда **возвратное выравнивания** вступит в игру и обработает доступное пространство. Это резервное выравнивание указывается отдельно для каждого метода макета и подробно описано на странице для этого метода.

Типы выравнивания
-----------------

Существует три различных типа выравнивания, которые специфицируют детали; они используют значения ключевых слов.

* **Positional alignment** (выравнивание положения): указание положения объекта выравнивания относительно его контейнера выравнивания.
* **Baseline alignment** (исходное выравнивание): эти ключевые слова определяют выравнивание как взаимосвязь между базовыми линиями нескольких объектов выравнивания в контексте выравнивания.
* **Distributed alignment** (распределённое выравнивание): эти ключевые слова определяют выравнивание как распределение пространства между объектами выравнивания.
### Значения ключевых слов позиционирования

Следующие значения определены для позиционного выравнивания и могут использоваться в качестве значений для выравнивания содержимого с `justify-content` и `align-content`, а также для самовыравнивания с `justify-self` и `align-self`.

* `center`
* `start`
* `end`
* `self-start`
* `self-end`
* `flex-start` for Flexbox only
* `flex-end` for Flexbox only
* `left`
* `right`

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

Например, при работе в CSS Grid Layout, если вы работаете на русском языке и устанавливаете для него значение `justify-content` `start`, это приведёт к перемещению элементов в встроенном измерении в начало, которое будет левым, поскольку предложения на русском начинаются слева. Если вы использовали арабский язык, право на левый язык, то одно и то же значение `start` приведёт к тому, что элементы перемещаются вправо, так как предложения на арабском языке начинаются с правой стороны страницы.

Оба этих примера имеют `justify-content: start`, однако местоположение начала изменяется в соответствии с режимом записи.

![](/ru/docs/Web/CSS/CSS_box_alignment/writing-mode-start.png)

### Исходное выравнивание

Ключевые слова выравнивания базовой линии используются для выравнивания базовых линий ящиков по группе субъектов выравнивания. Они могут использоваться в качестве значений для выравнивания контента с помощью `justify-content` и `align-content`, а также для самовыравнивания с `justify-self` и `align-self`.

* `baseline`
* `first baseline`
* `last baseline`

Исходное выравнивание содержимого - указание значения выравнивания базовой линии для `justify-content` или `align-content` - работает в методах макета, которые содержат элементы в строках. Объекты выравнивания выравниваются по базовой линии друг к другу, добавляя в них поля.

Исходная линия выравнивания сдвигает поля для выравнивания по базовой линии путём добавления поля за пределами полей. Self alignment - это использование `justify-self` или `align-self` или при настройке этих значений в виде группы с `justify-items` и `align-items`.

### Distributed alignment

**Ключевые слова распределённого выравнивания** используются с параметрами `align-content` и `justify-content`. Эти ключевые слова определяют, что происходит с каким-либо дополнительным пространством после отображения объекта. Значения следующие:

* `stretch`
* `space-between`
* `space-around`
* `space-evenly`

Например, элементы Flex Layout сначала выровнены с использованием `flex-start.` Работая в горизонтальном верхнем и нижнем режимах записи, таком как русский, с `flex-direction` в виде `row` элементы начинаются в крайнем левом углу и любое свободное место после отображения элементов помещается после элементов.

![](/ru/docs/Web/CSS/CSS_box_alignment/justify-content-start.png)

Если вы устанавливаете `justify-content: space-between` в контейнере flex, доступное пространство теперь разделяется и помещается между элементами.

![](/ru/docs/Web/CSS/CSS_box_alignment/justify-content-space-between.png)

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

Выравнивание переполнения
-------------------------

`safe` и `unsafe` ключевые слова помогают определить поведение, когда объект выравнивания больше, чем контейнер выравнивания. Ключевое слово `safe` будет выравниваться для `start` в случае заданного выравнивания, вызывающего переполнение, целью которого является избежать «потери данных», когда часть элемента находится за пределами границ контейнера выравнивания и не может быть прокручена до.

Если вы укажете `unsafe`, выравнивание будет выполнено, даже если это приведёт к такой потере данных.

Пробелы между boxes
-------------------

Спецификация выравнивания коробки также включает свойства `gap`, `row-gap` и `column-gap` . Эти свойства позволяют установить постоянный разрыв между элементами в строке или столбце в любом методе макета, который имеет элементы, расположенные таким образом.

Свойство `gap` является сокращением для `row-gap` и `column-gap`, что позволяет сразу установить эти свойства:

* `row-gap`
* `column-gap`
* `gap`

В приведённом ниже примере макет сетки использует сокращённую `gap`, чтобы установить разрыв `10px` между дорожками строк и `2em` разрыв между дорожками столбцов.

В этом примере я использую свойство `grid-gap` (en-US) в дополнение к `gap`. Первоначальные свойства зазора были предварительно префиксными `grid-` в спецификации Grid Layout, а некоторые браузеры поддерживают только эти префиксные версии.

* `grid-row-gap` (en-US)
* `grid-column-gap` (en-US)
* `grid-gap` (en-US)

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

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

Страницы, детализирующие индивидуальные свойства выравнивания
-------------------------------------------------------------

Поскольку свойства выравнивания полей CSS реализованы по-разному в зависимости от спецификации, с которой они взаимодействуют, обратитесь к следующим страницам для каждого типа макета для получения подробных сведений о том, как использовать с ним свойства выравнивания:

* Box alignment in Flexbox
* Box alignment in CSS Grid Layout (en-US)
* Box alignment in multiple-column layout (en-US)
* Box alignment for block, absolutely positioned and table layout (en-US)
Справка
-------

### CSS Properties

* `justify-content`
* `align-content`
* `place-content` (en-US)
* `justify-items`
* `align-items`
* `place-items`
* `justify-self` (en-US)
* `align-self`
* `place-self` (en-US)
* `row-gap`
* `column-gap`
* `gap`
### Glossary Entries

* Cross axis (en-US)
* Main axis
* Alignment container
* Alignment subject (en-US)
* Fallback alignment (en-US)
Guides
------

* CSS Flexbox guide: *Basic concepts of Flexbox*
* CSS Flexbox guide: *Aligning items in a flex container*
* CSS Grid guide: *Box alignment in CSS Grid layouts*
External Resources
------------------

* Box alignment cheatsheet
* CSS Grid, Flexbox and Box alignment
* Thoughts on partial implementations of Box alignment


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

animation-direction
===================

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

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

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

Также удобно использовать сокращённое свойство `animation`, чтобы одновременно установить все свойства анимации.

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

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

```css
/\* Одиночная анимация \*/
animation-direction: normal;
animation-direction: reverse;
animation-direction: alternate;
animation-direction: alternate-reverse;

/\* Несколько анимаций \*/
animation-direction: normal, reverse;
animation-direction: alternate, reverse, normal;

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

### Значения

`normal`

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

`reverse`

Анимация проигрывается наоборот, с *последнего* положения до первого и потом снова сбрасывается в *конечное* положение и снова проигрывается.

`alternate`

Анимация меняет направление в каждом цикле, то есть в первом цикле она начинает с *начального* положения, доходит до *конечного*, а во втором цикле продолжает с *конечного* и доходит до *начального* и так далее, в зависимости от количества циклов анимации `animation-iteration-count`.

`alternate-reverse`

Анимация начинает проигрываться с *конечного* положения и доходит до *начального*, а в следующем цикле продолжая с *начального* переходит в *конечное*, в зависимости от количества итераций анимации `animation-iteration-count`.

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

animation-direction =
  <single-animation-direction># (en-US)

<single-animation-direction> =
  normal             | (en-US)
  reverse            | (en-US)
  alternate          | (en-US)
  alternate-reverse

```

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

Смотрите примеры CSS анимаций.

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

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

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

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

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

* Использование CSS-анимации
* `AnimationEvent`


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

attr
====

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

С помощью функции CSS `attr()` можно извлекать значение атрибута выбранного элемента и использовать это значение в таблице стилей. Функция работает и с псевдо-элементами. В этом случае возвращается значение атрибута элемента, для которого формируется псевдо-элемент.

Функцию `attr()` можно использовать с любым свойством CSS, но поддержка иных свойств, кроме `content`, является экспериментальной.

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

```js
/\* Пример простого использования \*/
attr(data-count);
attr(title);

/\* С типом \*/
attr(src url);
attr(data-count number);
attr(data-width px);

/\* с фоллбэком \*/
attr(data-count number, 0);
attr(src url, '');
attr(data-width px, inherit);
attr(data-something, 'default');
```

### Значения

`attribute-name`

Название атрибута элемента HTML, на который ссылаемся в CSS.

`<type-or-unit>`
Экспериментальная возможность

Является ключевым словом, представляющим либо тип значения атрибута, либо его единицу, так как в HTML некоторые атрибуты имеют неявные единицы. Если использование `<type-or-unit>` в качестве значения для данного атрибута недопустимо, выражение `attr()` также будет недопустимым. Если этот параметр опущен, по умолчанию используется `string`. Список допустимых значений:

`string`

The attribute value is treated as a CSS `<string>` (en-US). It is NOT reparsed, and in particular the characters are used as-is instead of CSS escapes being turned into different

Значение по умолчанию: An empty string

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

The attribute value is parsed as a hash (3- or 6-value hash) or a keyword. It must be a valid CSS `<string>` (en-US) value. Leading and trailing spaces are stripped.

Значение по умолчанию: `currentColor`

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

The attribute value is parsed as a string that is used inside a CSS `url()` function. Relative URL are resolved relatively to the original document, not relatively to the style sheet. Leading and trailing spaces are stripped.

Значение по умолчанию: The url `about:invalid` that points to a non-existent document with a generic error condition.

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

The attribute value is parsed as a CSS `<integer>`. If it is not valid, that is not an integer or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<number>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<length>` dimension, that is including the unit (e.g. `12.5em`). If it is not valid, that is not a length or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped.

Значение по умолчанию: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

`em`, `ex`, `px`, `rem`, `vw`, `vh`, `vmin`, `vmax`, `mm`, `cm`, `in`, `pt`, or `pc`
Экспериментальная возможность

The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<length>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given unit is a relative length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped.

Значение по умолчанию: `0`, or, if `0` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<angle>` dimension, that is including the unit (e.g. `30.5deg`). If it is not valid, that is not an angle or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

`deg`, `grad`, `rad`
Экспериментальная возможность

The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an `<angle>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0deg`, or, if `0deg` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<time>` dimension, that is including the unit (e.g. `30.5ms`). If it is not valid, that is not a time or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

`s`, `ms`
Экспериментальная возможность

The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as an`<time>` with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0s`, or, if `0s` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<frequency>` (en-US) dimension, that is including the unit (e.g. `30.5kHz`). If it is not valid, that is not a frequency or out of the range accepted by the CSS property, the default value is used.

Значение по умолчанию: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

`Hz`, `kHz`
Экспериментальная возможность

The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<frequency>` (en-US) with the specified unit. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. Leading and trailing spaces are stripped.

Значение по умолчанию: `0Hz`, or, if `0Hz` is not a valid value for the property, the property's minimum value.

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

The attribute value is parsed as a CSS `<number>`, that is without the unit (e.g. `12.5`), and interpreted as a `<percentage>`. If it is not valid, that is not a number or out of the range accepted by the CSS property, the default value is used. If the given value is used as a length, `attr()` computes it to an absolute length. Leading and trailing spaces are stripped.

Значение по умолчанию: `0%`, or, if `0%` is not a valid value for the property, the property's minimum value.

`<fallback>`
Экспериментальная возможность

The value to be used if the associated attribute is missing or contains an invalid value. The fallback value must be valid where `attr()` is used, even if it is not used, and must not contain another `attr()` expression. If `attr()` is not the sole component value of a property, its `<fallback>` value must be of the type defined by `<type-or-unit>`. If not set, CSS will use the default value defined for each `<type-or-unit>`.

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

<attr()> =
  attr( <attr-name> <attr-type>? (en-US) , <declaration-value>? (en-US) )

<attr-name> =
  [ (en-US) <ident-token> '|' ] (en-US)? (en-US) <ident-token>

<attr-type> =
  string            | (en-US)
  url               | (en-US)
  ident             | (en-US)
  color             | (en-US)
  number            | (en-US)
  percentage        | (en-US)
  length            | (en-US)
  angle             | (en-US)
  time              | (en-US)
  frequency         | (en-US)
  flex              | (en-US)
  <dimension-unit>

```

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

```css
p::before {
  content: attr(data-foo) " ";
}
```

```html
<p data-foo="hello">world</p>
```

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

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

| Specification |
| --- |
| CSS Values and Units Module Level 5 # attr-notation |

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

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


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

animation-timing-function
=========================

CSS свойство **`animation-timing-function`** задаёт как происходит анимация в течении длительности каждого цикла.

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

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

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

```css
/\* Keyword values \*/
animation-timing-function: ease;
animation-timing-function: ease-in;
animation-timing-function: ease-out;
animation-timing-function: ease-in-out;
animation-timing-function: linear;
animation-timing-function: step-start;
animation-timing-function: step-end;

/\* Function values \*/
animation-timing-function: cubic-bezier(0.1, 0.7, 1, 0.1);
animation-timing-function: steps(4, end);

/\* Steps Function keywords \*/
animation-timing-function: steps(4, jump-start);
animation-timing-function: steps(10, jump-end);
animation-timing-function: steps(20, jump-none);
animation-timing-function: steps(5, jump-both);
animation-timing-function: steps(6, start);
animation-timing-function: steps(8, end);

/\* Multiple animations \*/
animation-timing-function: ease, step-start, cubic-bezier(0.1, 0.7, 1, 0.1);

/\* Global values \*/
animation-timing-function: inherit;
animation-timing-function: initial;
animation-timing-function: unset;
```

Временные функции могут быть установлены в пользовательских ключевых кадрах в правилах @keyframes (en-US). Если в ключевом кадре значение **`animation-timing-function`** указано, соответствующее значение **`animation-timing-function`** от элемента к которому анимация применена используется для этого ключевого кадра.

### Значения

`<timingfunction>`

Каждый `<timing-function>` (en-US) представляет функцию расчёта времени для связи с соответствующим свойством animate, как определено в `animation-property`.

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

animation-timing-function =
  <easing-function># (en-US)

<easing-function> =
  linear                          | (en-US)
  <linear-easing-function>        | (en-US)
  <cubic-bezier-easing-function>  | (en-US)
  <step-easing-function>

<linear-easing-function> =
  linear( <linear-stop-list> )

<cubic-bezier-easing-function> =
  ease                                                | (en-US)
  ease-in                                             | (en-US)
  ease-out                                            | (en-US)
  ease-in-out                                         | (en-US)
  cubic-bezier( <number [0,1]> , <number> , <number [0,1]> , <number> )

<step-easing-function> =
  step-start                             | (en-US)
  step-end                               | (en-US)
  steps( <integer> , <step-position>? (en-US) )

<linear-stop-list> =
  [ (en-US) <linear-stop> ] (en-US)# (en-US)

<step-position> =
  jump-start  | (en-US)
  jump-end    | (en-US)
  jump-none   | (en-US)
  jump-both   | (en-US)
  start       | (en-US)
  end

<linear-stop> =
  <number>               && (en-US)
  <linear-stop-length>? (en-US)

<linear-stop-length> =
  <percentage>{1,2} (en-US)

```

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

См. CSS animations.

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

| Specification |
| --- |
| CSS Animations Level 1 # animation-timing-function |

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

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

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

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