recursal/MDN huggingface dataset:
row-gap
=======

Свойство CSS **`row-gap`** задаёт отступ (gutter (en-US)) между рядами.

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

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


```css
/\* <length> values \*/
row-gap: 20px;
row-gap: 1em;
row-gap: 3vmin;
row-gap: 0.5cm;

/\* <percentage> value \*/
row-gap: 10%;

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


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

### Значения

`<length-percentage>`

Ширина отступа, разделяющего ряды. `Процентные` значения рассчитываются относительно размера грид-элемента.

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

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

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

row-gap =   
  normal                     | (en-US)  
  <length-percentage [0,∞]>    
  
<length-percentage> =   
  <length>      | (en-US)  
  <percentage>    
  
```

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

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

#### HTML


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


#### CSS


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

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


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

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

#### HTML


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


#### CSS


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

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


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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # column-row-gap |

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

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

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

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

Свойство CSS `orphans` устанавливает *минимальное* число строк в блочном контейнере, которое должно быть показано *внизу* страницы, региона или столбца (en-US).


```css
/\* <integer> значения \*/
orphans: 2;
orphans: 3;

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


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

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

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

### Значения

`<integer>`

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

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

orphans =   
  <integer [1,∞]>    
  
```

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

### HTML


```html
<div>
  <p>This is the first paragraph containing some text.</p>
  <p>
    This is the second paragraph containing some more text than the first one.
    It is used to demonstrate how widows work.
  </p>
  <p>
    This is the third paragraph. It has a little bit more text than the first
    one.
  </p>
</div>
```

### CSS


```css
div {
  background-color: #8cffa0;
  height: 150px;
  columns: 3;
  orphans: 3;
}

p {
  background-color: #8ca0ff;
}

p:first-child {
  margin-top: 0;
}
```


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

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

| Specification |
| --- |
| CSS Fragmentation Module Level 3 # widows-orphans |

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

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

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

* `widows`
* Paged media
:indeterminate
==============

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

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

* Learn more
* See full compatibility
* Report feedback
CSS псевдокласс **`:indeterminate`** находит элементы в неопределённом состоянии.


```css
/\* Выбирает все элементы <input>, которые находятся в неопределённом состоянии \*/
input:indeterminate {
  background: lime;
}
```


Селектор находит следующие элементы:

* Элементы `<input type="checkbox">` (en-US), свойство `indeterminate` которых было установлено в `true` через JavaScript
* Элементы `<input type="radio">`, когда все радио переключатели в одной группе (с одинаковым атрибутом `name`) не выбраны
* Элементы `<progress>` в неопределённом состоянии
Синтаксис
---------

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

### Чекбокс и радио переключатели

В этом примере специальные стили применяются к меткам, которые привязаны к неопределённым полям формы.

#### HTML


```html
<div>
  <input type="checkbox" id="checkbox" />
  <label for="checkbox">Эта метка будет зелёной.</label>
</div>
<div>
  <input type="radio" id="radio" />
  <label for="radio">Эта метка будет зелёной.</label>
</div>
```


#### CSS


```css
input:indeterminate + label {
  background: lime;
}
```


#### JavaScript


```js
var inputs = document.getElementsByTagName("input");

for (var i = 0; i < inputs.length; i++) {
  inputs[i].indeterminate = true;
}
```

### Полоса прогресса

#### HTML


```html
<progress></progress>
```


#### CSS


```css
progress {
  margin: 4px;
}

progress:indeterminate {
  opacity: 0.5;
  background-color: lightgray;
  box-shadow: 0 0 2px 1px red;
}
```

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

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

| Specification |
| --- |
| HTML Standard # selector-indeterminate |
| Selectors Level 4 # indeterminate |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
animation-name
==============

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

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

CSS свойство **`animation-name`** задаёт список анимаций, чтобы применить к элементу. Каждое имя является правилом `@keyframes` (en-US), которое задаёт значения свойств для последовательности анимации.

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

Часто удобно использовать сокращённое свойство `animation` для одновременной установки всех свойств анимации.

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


```css
/\* Single animation \*/
animation-name: none;
animation-name: test_05;
animation-name: -specific;
animation-name: sliding-vertically;

/\* Multiple animations \*/
animation-name: test1;
animation-name: test1, animation4;
animation-name: none, -moz-specific, sliding;

/\* Global values \*/
animation-name: initial
animation-name: inherit
animation-name: unset
```

### Значения

`none`

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

`<custom-ident>`

Строка, идентифицирующая анимацию. Этот идентификатор состоит из комбинации букв без учёта регистра от `a` до `z`, цифр от `0` до `9`, подчёркивания (`_`), и/или черты (`-`). Первый символ без черты должен быть буквой (то есть, без цифры в начале, даже если перед ним стоит черта.) Кроме того, две черты запрещены в начале идентификатора. Оно не может быть `none`, `unset`, `initial`, или `inherit` в любой комбинации случаев.

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

animation-name =   
  [ (en-US) none | (en-US) <keyframes-name> ] (en-US)# (en-US)    
  
<keyframes-name> =   
  <custom-ident>  | (en-US)  
  <string> (en-US)          
  
```

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

См. CSS animations.

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

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

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

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

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

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

Ключевое слово **`revert`** (CSS) откатывает один текущий уровень каскада, таким образом свойство принимает такое значение, которое было бы, если бы не было никаких стилей в текущем источнике стилей (авторских, пользовательских или браузерных). Как следствие, оно сбрасывает свойство к значению по умолчанию, которое было установлено браузером (или пользовательскими стилями, если такие имеются). Ключевое слово **`revert`** может быть применимо к любому свойству CSS, включая сокращённое свойство `all`.

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

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

**Примечание:** Ключевое слово `revert` отличается от `initial`, поэтому его не следует с ним путать. `initial` использует начальное значение, которое определено отдельно для каждого свойства CSS-спецификацией. Для сравнения, браузеры устанавливают значения по умолчанию в зависимости от CSS селектора.Например, начальное значение для свойства `display` — `inline`, тогда как браузер устанавливает значение по умолчанию свойства `display` элемента `<div>` как `block`, а элемента `<table>` (en-US) как `table`, и т.д

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

### HTML


```html
<section>
  <p>Это секция!</p>

  <aside class="widget">
    <p>А это маленький виджет.</p>
  </aside>
</section>
```

### CSS


```css
section {
  color: blue;
  font-family: sans-serif;
  font-weight: bold;
}

.widget {
  all: revert;
}
```

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

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

| Specification |
| --- |
| CSS Cascading and Inheritance Level 4 # default |

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

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

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

* Используйте `initial`, чтобы установить свойству начальное значение.
* Используйте `unset` (en-US), чтобы установить свойству унаследованное значение, если оно наследуется, в противном случае начальное значение.
* Используйте `inherit`, чтобы установить значение свойства элемента таким же, как у его родителя.
* Свойство `all` позволяет одновременно сбросить все свойства к их начальному, унаследованному, откатанному или обнулённому состоянию.
:required
=========

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

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

Псевдо-класс `:optional` может использоваться, чтобы дать особый внешний вид полям, не обязательным для заполнения.

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

Смотрите `:invalid`.

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

| Specification |
| --- |
| HTML Standard # selector-required |
| Selectors Level 4 # opt-pseudos |

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

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

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

* `:optional`, `:invalid`, `:valid`
:only-of-type
=============

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

CSS псевдокласс `:only-of-type` выбирает такой элемент, который является единственным потомком такого типа.


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

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

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

#### HTML


```html
<main>
  <div>Я <code>div</code> №1.</div>
  <p>Я тут единственный <code>p</code> элемент.</p>
  <div>Я <code>div</code> №2.</div>
  <div>
    Я <code>div</code> №3.
    <i>Я единственный потомок типа <code>i</code>.</i>
    <em>Я <code>em</code> №1.</em>
    <em>Я <code>em</code> №2.</em>
  </div>
</main>
```


#### CSS


```css
main :only-of-type {
  color: red;
}
```


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

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

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

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

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

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

* `:nth-of-type`, `:first-of-type`, `:last-of-type`
::-moz-progress-bar
===================

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

Представляет собой индикатор прогресса внутри `<progress>` (Бар, отражающий текущий прогресс).

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

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

### HTML


```html
<progress value="30" max="100">30%</progress>
<progress max="100">Неопределённый бар прогресса</progress>
```

### CSS


```css
::-moz-progress-bar {
  background-color: red;
}

/\* Задаёт неопределённым барам нулевую ширину \*/
:indeterminate::-moz-progress-bar {
  width: 0;
}
```

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

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

* `<progress>`
* `::-ms-fill`
* `::-webkit-progress-bar` (en-US)
* `::-webkit-progress-value` (en-US)
* `::-webkit-progress-inner-element` (en-US)
:lang()
=======

Псевдо-класс CSS **`:lang()`** выбирает элементы основываясь на языке, на котором они определены.


```css
/\* Выбирает все <p>, что на английском (en) \*/
p:lang(en) {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
```


**Примечание:** В HTML язык определяется комбинацией атрибута `lang`, элемента `<meta>` и иногда информацией из протокола (такой, как заголовки HTTP ). Для других типов документов могут быть другие методы определения языка.

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

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

Error: could not find syntax for this item### Параметр

`<language-code>`

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

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

In this example, the `:lang()` pseudo-class is used to match the parents of quote elements (`<q>` (en-US)) using child combinators. Note that this doesn't illustrate the only way to do this, and that the best method to use depends on the type of document. Also note that Unicode (en-US) values are used to specify some of the special quote characters.

### HTML


```html
<div lang="en">
  <q>This English quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="fr">
  <q>This French quote has a <q>nested</q> quote inside.</q>
</div>
<div lang="de">
  <q>This German quote has a <q>nested</q> quote inside.</q>
</div>
```

### CSS


```css
:lang(en) > q {
  quotes: "\201C" "\201D" "\2018" "\2019";
}
:lang(fr) > q {
  quotes: "« " " »";
}
:lang(de) > q {
  quotes: "»" "«" "\2039" "\203A";
}
```

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

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

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

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

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

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

* Language-related pseudo-classes: `:lang`, `:dir`
* HTML `lang` attribute
* BCP 47 - Tags for Identifying Languages
:first-of-type
==============

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

CSS псевдокласс `:first-of-type` находит первого потомка своего типа среди детей родителя.

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


```css
element:first-of-type {
  /\* стили \*/
}
```

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

Этот пример показывает, как применится универсальный селектор, если простой селектор не написан.


```css
div :first-of-type {
  background-color: lime;
}
```



```html
<div>
  <span>Это span первый!</span>
  <span>Это span нет. :(</span>
  <span>что насчёт этого <em>вложенного элемента</em>?</span>
  <strike>Это другой тег</strike>
  <span>Грустно, это тоже нет...</span>
</div>
```


...сработает так:

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

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

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

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

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

* `:nth-of-type`, `:last-of-type`
:read-only
==========

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

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

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

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

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


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

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

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

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

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

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

* `:read-write`
* HTML атрибут `contenteditable` (en-US)
CSS Flexible Box Layout
=======================

**Способ CSS раскладки Flexible Box** (CSS Flexible Box Layout или **Flexbox**) — это способ CSS раскладки, означающий блочную модель CSS (en-US), оптимизированную для построения пользовательских интерфейсов. Во флекс-модели потомки флекс-контейнера могут выстраиваться в любом направлении (право/лево, верх/низ), растягиваться, заполняя свободное пространство, или сжиматься во избежание переполнения родительского контейнера. Доступно различное выравнивание потомков по горизонтали и вертикали. Комбинация из родительского и вложенных блоков позволяют создавать такой layout, при котором элементы автоматически выстраиваются в столбы или строки.

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

В следующем примере контейнер объявлен как `display: flex`, таким образом его три потомка становятся флекс-элементами. Свойству `justify-content` присвоено значение `space-between` для того, чтобы, во-первых, задать между элементами равные интервалы по основной оси, и, во-вторых, «примагнитить» первый и последний элементы к левому и правому краям контейнера соответственно. Также можно заметить, что флекс-элементы растянуты перпендикулярно оси; это происходит из-за того, что дефолтным значением `align-items` является `stretch`. Так как высота родительского контейнера не задана, элементы растягиваются по высоте и принимают значение высоты самого высокого из них.

Reference
---------

### CSS Properties

* `align-content`
* `align-items`
* `align-self`
* `flex`
* `flex-basis`
* `flex-direction`
* `flex-flow`
* `flex-grow`
* `flex-shrink`
* `flex-wrap`
* `justify-content`
* `order`
Guides
------

Using CSS flexible boxes (en-US)

Step-by-step tutorial about how to build layouts using this feature.

Using flexbox to lay out Web applications (en-US)

Tutorial explaining how to use flexbox in the specific context of Web applications.

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

| Specification |
| --- |
| CSS Flexible Box Layout Module Level 1  |
border-image-source
===================

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

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

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

The **`border-image-source`** CSS property defines the `<image>` (en-US) to use instead of the style of the border. If this property is set to `none`, the style defined by `border-style` (en-US) is used instead.

**Примечание:** Though any `<image>` (en-US) can be used with this CSS property, browser support is still limited and some browsers support only images defined using the `url()` functional notation.

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

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


```css
/\* no border-image, use the specified border-style \*/
border-image-source: none;

/\* the image.jpg is used as image \*/
border-image-source: url(image.jpg);

/\* a gradient is used as image \*/
border-image-source: linear-gradient(to top, red, yellow);

/\* Global values \*/
border-image-source: inherit;
border-image-source: initial;
border-image-source: unset;
```

### Значения

`none`

Specifies that no image should be used for the border. Instead the style defined by `border-style` (en-US) is used.

`<image>`

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

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

border-image-source =   
  none     | (en-US)  
  <image>    
  
<image> =   
  <url>       | (en-US)  
  <gradient> (en-US)    
  
<url> =   
  <url()>  | (en-US)  
  <src()>    
  
<url()> =   
  url( <string> (en-US) <url-modifier>\* (en-US) )  | (en-US)  
  <url-token>                        
  
<src()> =   
  src( <string> (en-US) <url-modifier>\* (en-US) )    
  
```

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

See `border-image` (en-US) for examples of what the various source values will do.

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

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

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

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

Псевдокласс CSS **`:left`** используется с @-правилом `@page`, предоставляет все левые страницы печатного документа.


```css
/\* Выбирает все левые страницы при печати \*/
@page :left {
  margin: 2in 3in;
}
```


Является ли данная страница "левой" или "правой" определяется основным направлением документа. Например, если первая страница имеет основное направление слева направо, то это будет страница с page `:right` ; если первая страница имеет основное направление справа налево, то это будет страница с page `:left`.

**Примечание:** Этот псевдокласс можно использовать только для изменений следующих свойств элементов страницы: `margin`, `padding`, `border`, и`background` . Все остальные свойства будут игнорироваться; изменены будут только свойства элементов страницы без изменения содержимого документа.

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

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

### Выставляем отступы для левых страниц


```css
@page :left {
  margin: 2in 3in;
}
```

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

| Specification |
| --- |
| CSS Paged Media Module Level 3 # left-right-first |

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

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

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

* `@page`
* Другие псевдоклассы, связанные с @page: `:first`, `:right`