recursal/MDN huggingface dataset:
Замещаемый элемент
==================

В CSS, **замещаемый элемент** — это элемент, чьё представление выходит за рамки CSS. Другими словами, это внешний объект, чьё представление независимо от модели форматирования CSS.

Замещаемые элементы
-------------------

Типичные замещаемые элементы:

* `<iframe>` (en-US)
* `<video>`
* `<embed>`
* `<img>`

Некоторые элементы рассматриваются как замещаемые только в некоторых случаях:

* `<audio>`
* `<canvas>`
* `<object>` (en-US)

Спецификация HTML также указывает, что элемент `<input>` может быть замещаемым, поскольку элемент `<input>` с типом image является замещаемым элементом наподобие `<img>`. Однако другие элементы форм, включая другие типы элементов `<input>`, явно отнесены к незамещаемым элементам (для описания их отображения по умолчанию, которое может быть разным на разных платформах, спецификация использует термин «Виджеты»).

Объекты, добавляемые с помощью CSS-свойства `content` являются *анонимными замещаемыми элементами*. Они «анонимные», так как они не существуют в HTML-разметке.

Использование CSS с замещаемыми элементами
------------------------------------------

CSS обрабатывает замещаемые элементы особым образом в некоторых случаях, например при расчёте внешних отступов и некоторых значений `auto`.

Заметим, что у некоторых замещаемых элементов, но не у всех, есть внутренние размеры или определённая базовая линия, которая используется CSS-свойствами вроде `vertical-align`.

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

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

CSS-свойство **`word-spacing`** устанавливает длину пробела между словами и между тегами.

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

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


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

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

/\* <percentage> значения \*/
word-spacing: 50%;
word-spacing: 200%;

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

### Значения

`normal`

Нормальный интервал между словами, определённый текущим шрифтом и/или браузером.

`<length>`

Определяет дополнительный интервал в дополнение к внутреннему интервалу между словами, определяемому шрифтом.

`<percentage>`

Определяет дополнительный интервал как процент от предварительной ширины символа.

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

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

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

### HTML


```html
<div id="mozdiv1">Here are many words...</div>
<div id="mozdiv2">...and many more!</div>
```

### CSS


```css
#mozdiv1 {
  word-spacing: 15px;
}

#mozdiv2 {
  word-spacing: 5em;
}
```

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

Большое положительное или отрицательное значение `word-spacing` может сделать предложения, к которым применяется стиль, нечитаемыми. Для текста, стилизованного с очень большими положительными значениями, слова будут так далеки друг от друга, что он больше не будет казаться предложением. Для текста, стилизованного с очень большими отрицательными значениями, слова будут перекрывать друг от друга до точки, где начало и конец каждого слова будут неразличимы.

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

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

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

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

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.
<display-listitem>
==================

Ключевое слово `list-item` приводит к тому, что элемент генерирует `::marker` псевдо-элемент с определяемыми `list-style` (en-US) свойствами (например, маркерной точкой) вместе с основным блоком указанного типа для его содержимого.

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

Единственное значение `list-item приведёт к тому, что элемент будет вести себя как элемент списка. Это можно использовать вместе с `list-style-type` (en-US) и `list-style-position` (en-US).`

**Примечание:** В браузерах, поддерживающих двухзначный синтаксис, если внутреннее значение не указано, по умолчанию оно будет `flow`. Если внешнее значение не указано, основной блок будет иметь внешний вид отображения (`outer display type`) block.`

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

### `HTML`


```html
<div class="fake-list">I will display as a list item</div>
```

### `CSS`


```css
.fake-list {
  display: list-item;
  list-style-position: inside;
}
```

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

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

### Поддержка list-item

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

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

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

Это свойство не имеет эффекта на *незамещаемых (non-replaced)* строковых (inline) элементах, таких как `<span>` или `<code>`.

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


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

/\* Значения длины \*/
margin-top: 10px; /\* абсолютное значение \*/
margin-top: 1em; /\* относительно размера текста \*/
margin-top: 5%; /\* относительно ширины ближайшего контейнера \*/

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


Свойство `margin-top` может принимать значение `auto,` `<length>` или `<percentage>`. Эти значения могут быть положительные, отрицательные или равны нулю.

### Значения

`<length>`

Значение margin является фиксированной величиной

`<percentage>`

Значение margin выражается в процентах по отношению к *ширине* блока, содержащего элемент.

`auto`

Браузер выбирает подходящее значение для использования. Смотри `margin`.

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

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

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


```css
.content {
  margin-top: 5%;
}
.sidebox {
  margin-top: 10px;
}
.logo {
  margin-top: -5px;
}
#footer {
  margin-top: 1em;
}
```

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

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

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

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

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

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

Свойство `transform-style` CSS определяет положение дочернего элемента в 3D-пространстве или в той же плоскости, что и родительский элемент.

Если flat, то дочерний элемент не будет существовать в своём собственном 3D-пространстве.

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

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

Syntax
------


```css
/\* Keyword values \*/
transform-style: preserve-3d;
transform-style: flat;

/\* Global values \*/
transform-style: inherit;
transform-style: initial;
transform-style: unset;
```

### Values

`preserve-3d`

Показывает, что дочерний элемент должен быть спозиционирован в 3D-пространстве.

`flat`

Показывает, что дочерний элемент лежит в той же плоскости, что и родительский.

### Formal syntax
```

transform-style =   
  flat         | (en-US)  
  preserve-3d    
  
```

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

| Specification |
| --- |
| CSS Transforms Module Level 2 # transform-style-property |

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

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

See also
--------

* Using CSS Transforms (en-US)
<display-outside>
=================

Ключевые слова `<display-outside>` определяют внешний тип отображения элемента (outer `display` type), который играет существенную роль в схеме потока. Эти ключевые слова используются как значения свойства `display` и могут быть использованы в целях преемственности как единственное ключевое слово или, как определено в рамках спецификации Level 3, наряду со значением из `<display-inside>` (en-US).

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

Значение `<display-outside>` определяется с использованием ключевого слова из списка ниже:

### Значения

`block`

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

`inline`

Элемент создаёт один или более строковых (inline) боксов элемента, которые не создают разрывов строк перед собой или после себя. В нормальном потоке следующий элемент будет находиться на той же линии, если есть пробел.

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

Элемент генерирует run-in бокс. Если соседний родственный (sibling) элемент определён как `display: run-in, тогда` бокс является блоковым боксом, `run-in` бокс становится первым строковым (inline) боксом блокового бокса, который следует за ним.

Run-in элементы ведут себя как строковые (inlines) или блоковые, в зависимости от окружающих элементов. Если run-in бокс содержит блоковый бокс, тогда он сам считается блоковым. Если блоковый бокс следует за run-in боксом, тогда run-in бокс становится первым строковым (inline) боксом блокового бокса. Если за ним следует строковый (inline) бокс, тогда run-in бокс становится блоковым боксом.


**Примечание:** Браузеры, поддерживающие двузначный синтаксис значений, при обнаружении только внешнего значения, например, при отображении `display: block` или `display: inline`, установят внутреннее значение как `flow`. Это приведёт к ожидаемому поведению; например, если вы укажете элемент, который будет блоком, вы ожидаете, что его дочерние элементы будут участвовать в блочной и строковой разметке нормального потока.

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

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

### HTML


```html
<span>span 1</span> <span>span 2</span>
```

### CSS


```css
span {
  display: block;
  border: 1px solid rebeccapurple;
}
```

### Result

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

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

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

* `display`
* `<display-inside>` (en-US)
* Block and Inline layout in Normal Flow (en-US)
* Formatting Contexts explained (en-US)
:invalid
========

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

CSS псевдокласс `:invalid` находит любые `<input>` или `<form>` элементы, контент которых не проходит валидацию (en-US), в соответствии с типом поля. Он позволяет вам легко менять внешний вид полей, что позволяет пользователю видеть и исправлять ошибки.

По умолчанию, Gecko не применяет стили к псевдоклассу `:invalid`. Однако, применяет стили (красное "свечение", используя свойство `box-shadow`) к псевдоклассу `:-moz-ui-invalid` (en-US), который применяется в подгруппе случаев для `:invalid`.

Вы можете отключить свечение, используя следующий CSS или полностью изменить внешний вид некорректных полей.


```css
:invalid {
  box-shadow: none;
}

:-moz-submit-invalid {
  box-shadow: none;
}

:-moz-ui-invalid {
  box-shadow: none;
}
```

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

#### Радиокнопки

Если любая из радиокнопок в группе (т.е., с одинаковым атрибутом `name`) имеет атрибут `required`, псевдокласс `:invalid` применяется ко всем из них, если ни одна из кнопок группы не выбрана.

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

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

### HTML


```html
<form>
  <label>Введите URL:</label>
  <input type="url" />
  <br />
  <br />
  <label>Введите эл. почту:</label>
  <input type="email" required />
</form>
```

### CSS


```css
input:invalid {
  background-color: #ffdddd;
}

form:invalid {
  border: 5px solid #ffdddd;
}

input:valid {
  background-color: #ddffdd;
}

form:valid {
  border: 5px solid #ddffdd;
}

input:required {
  border-color: #800000;
  border-width: 3px;
}
```

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

| Specification |
| --- |
| HTML Standard # selector-invalid |
| Selectors Level 4 # validity-pseudos |

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

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

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

* Прочие псевдоклассы для валидации: `:required`, `:optional`, `:valid`
* Псевдоклассы Mozilla: `:user-invalid` (en-US), `:-moz-submit-invalid` (en-US)
* Валидация форм
* Получение состояния валидации средствами JavaScript
user-select
===========

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

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


```css
/\* Ключевые слова \*/
user-select: none;
user-select: auto;
user-select: text;
user-select: contain;
user-select: all;

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

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

`none`

Текст элемента и вложенных в него элементов не выбирается. Обратите внимание, что объект `Selection` (en-US) может содержать эти элементы.

`auto`

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

* Для псевдо-элементов `::before` и `::after` вычисляемое значение - `none`
* Если элемент является редактируемым, вычисляемое значение - `contain`
* Иначе, если вычисляемое значение `user-select` для родителя этого элемента - `all`, вычисляемое значение - `all`
* Иначе, если вычисляемое значение `user-select` для родителя этого элемента - `none`, вычисляемое значение - `none`
* Иначе, вычисляемое значение - `text`

`text`

Текст может быть выбран пользователем.

`all`

В HTML-редакторе, если двойной клик или контекстный клик произошёл во вложенном элементе, будет выбрано все содержимое коренного предка с этим значением свойства.

`contain`

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

`element`
Non-standard
 (IE-specific alias)

Аналогичен `contain`. Поддерживается только в Internet Explorer.


**Примечание:** CSS UI 4 renames user-select: element to contain.

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

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

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

user-select =   
  auto     | (en-US)  
  text     | (en-US)  
  none     | (en-US)  
  contain  | (en-US)  
  all        
  
```

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

### HTML


```html
<p>You should be able to select this text.</p>
<p class="unselectable">Hey, you can't select this text!</p>
<p class="all">Clicking once will select all of this text.</p>
```

### CSS


```css
.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.all {
  -moz-user-select: all;
  -webkit-user-select: all;
  -ms-user-select: all;
  user-select: all;
}
```

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # content-selection |

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

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

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

* `::selection`
* Объект JavaScript `Selection` (en-US).
* user-select in CSS Basic User Interface Module Level 4.
Универсальные селекторы
=======================

Краткое описание
----------------

Звёздочка (\*) - универсальный селектор для CSS. Соответствует любому тегу. Убирая звёздочки с простых селекторов имеет тот же эффект. Например, *\* .warning* и *.warning* считаются равными.

В CSS 3, звёздочка (`*`) может использоваться в комбинации с пространством имён

* `ns|*` - вхождения всех элементов в пространстве имён ns
* `*|*` - находит все элементы
* `|*` - ищет все элементы без объявленного пространства имён
Пример
------


```css
\*[lang^="en"] {
  color: green;
}
\*.warning {
  color: red;
}
\*#maincontent {
  border: 1px solid blue;
}
```



```html
<p class="warning">
  <span lang="en-us">Зелёный span</span> в красном параграфе.
</p>
<p id="maincontent" lang="en-gb">
  <span class="warning">Красный span</span> в зелёном параграфе.
</p>
```

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

| Specification |
| --- |
| Selectors Level 4 # the-universal-selector |

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

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

Псевдоэлемент **`::marker`** применяет стили к маркеру элемента списка, которые обычно содержит значок или номер. Работает с любым элементом или псевдоэлементом, к которого установлен `display: list-item`, например, у такого как `<li>` или `<summary>`.


```css
::marker {
  color: blue;
  font-size: 1.2em;
}
```

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

Только некоторые CSS-свойства могут быть использованы с `::marker` в качестве селектора:

* Все свойства шрифтов
* `white-space`
* `color` (en-US)
* `text-combine-upright` (en-US), `unicode-bidi` (en-US) и `direction`
* Свойство `content`
* Все animation и transition (en-US) свойства

**Примечание:** The specification states that additional CSS properties may be supported in future.

Syntax
------

Error: could not find syntax for this itemExamples
--------

### HTML


```html
<ul>
  <li>Peaches</li>
  <li>Apples</li>
  <li>Plums</li>
</ul>
```

### CSS


```css
ul li::marker {
  color: red;
  font-size: 1.5em;
}
```

### Result

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

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

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

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

See also
--------

* HTML-элементы, у которые есть маркеры списка по умолчанию: `<ol>`, `<li>`, `<summary>`
hanging-punctuation
===================

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

Свойство **`hanging-punctuation`** определяет как браузер будет отображать знаки пунктуации, попадающие в начало или в конец строки. Висячая пунктуация может располагаться за границами контейнера.


```css
/\* Ключевые слова \*/
hanging-punctuation: none;
hanging-punctuation: first;
hanging-punctuation: last;
hanging-punctuation: force-end;
hanging-punctuation: allow-end;

/\* Два ключевых слова \*/
hanging-punctuation: first force-end;
hanging-punctuation: first allow-end;
hanging-punctuation: first last;
hanging-punctuation: last force-end;
hanging-punctuation: last allow-end;

/\* Три ключевых слова \*/
hanging-punctuation: first force-end last;
hanging-punctuation: first allow-end last;

/\* Общие значения \*/
hanging-punctuation: inherit;
hanging-punctuation: initial;
hanging-punctuation: unset;
```


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

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

Свойство `hanging-punctuation` может быть определено с помощью одного, двух или трёх ключевых слов.

* Для **одного значения** может быть использовано любое из описанных ниже значений.
* Для **двух значений** используются следующие варианты:
    + `first` вместе с одним из `last`, `allow-end` или `force-end`
    + `last` вместе с одним из `first`, `allow-end` или `force-end`
* Для **трёх значений** используются один из следующих вариантов:
    + `first`, `allow-end` и `last`
    + `first`, `force-end` и `last`
### Значения

`none`

Никакие символы не выносятся.

`first`

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

`last`

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

`force-end`

Точка или запятая в конце строки выносится.

`allow-end`

Точка или запятая в конце строки будет вынесена, если нет лучшего варианта для выравнивания.

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

hanging-punctuation =   
  none                                            | (en-US)  
  [ (en-US) first || (en-US) [ (en-US) force-end | (en-US) allow-end ] (en-US) || (en-US) last ] (en-US)    
  
```

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

### HTML


```html
<p>
  “Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur dignissim
  nunc mauris, et sollicitudin est scelerisque sed. Praesent laoreet tortor
  massa, sit amet vulputate nulla pharetra ut.”
</p>
```

### CSS


```css
p {
  hanging-punctuation: first last;
  margin: 0.5rem;
}
```

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

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

| Specification |
| --- |
| CSS Text Module Level 3 # hanging-punctuation-property |

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

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