<input type="number"> - HTML

<input type="number">
=====================

`<input>` элементы типа **`number`** используются для того, чтобы дать возможность пользователю ввести число. У них есть встроенная валидация, запрещающая вводить нечисловые значения. Браузер может предоставить возможность увеличить или уменьшить значение специальными стрелками, используя мышь или просто двигая пальцем по экрану.

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

В браузерах, которые не поддерживают тип `number`, тип `number` приводится к `text`.

| **Value** | A `Number` representing a number, or empty |
| --- | --- |
| **Events** | `change (en-US)` and `input (en-US)` |
| **Supported Common Attributes** | `autocomplete`, `list`, `placeholder`, `readonly` |
| **IDL attributes** | `list`, `value`, `valueAsNumber` |
| **Methods** | `select()` (en-US), `stepUp()` (en-US), `stepDown()` (en-US) |

Value
-----

`Number`, представляющий значение введённого числа. Вы можете установить значение по умолчанию, вставив значение в атрибут `value`, например:

```html
<input id="number" type="number" value="42" />
```

Additional attributes
---------------------

In addition to the attributes commonly supported by all `<input>` types, inputs of type `number` support these attributes:

| Attribute | Description |
| --- | --- |
| `max` | The maximum value to accept for this input |
| `min` | The minimum value to accept for this input |
| `placeholder` | An example value to display inside the field when it's empty |
| `readonly` | A Boolean attribute controlling whether or not the value is read-only |
| `step` | A stepping interval to use when using up and down arrows to adjust the value, as well as for validation |

### `max`

The maximum value to accept for this input. If the `value` entered into the element exceeds this, the element fails constraint validation (en-US). If the value of the `max` attribute isn't a number, then the element has no maximum value.

This value must be greater than or equal to the value of the `min` attribute.

### `min`

Минимальное значение, которое может принять это поле ввода. Если значение атрибута `value` меньше, то элемент не проходит проверку ограничений. Если указанное для `min` значение не является числом, то у поля ввода нет минимального значения.

Это значение должно быть меньше или равно значению атрибута `max`.

### `step`

Атрибут `step` – это число, которое определяет точность, с которой задаётся значение, или специальное значение `any`, описанное ниже. Только значения, кратные шагу (`min`, если задано, иначе `value`, или подходящее стандартное значение, если ни одно из двух не задано) будут корректными.

Строковое значение `any` означает, что никакое значение шага не задано и допустимо любое значение (в пределах других ограничений, таких как `min` и `max`).

**Примечание:** Когда значение, введённое пользователем, не подходит под заданное значение шага, user agent может округлить его до ближайшего допустимого значения с приоритетом в большую сторону в том случае, если значение находится ровно посередине шага.

Стандартное значение шага для поля ввода `number` – это `1`, что позволяет вводить только целые числа, *если* только не задать значение шага нецелым числом.

Using number inputs
-------------------

`<input type="number">` elements can help simplify your work when building the user interface and logic for entering numbers into a form. When you create a number input with the proper `type` value, `number`, you get automatic validation that the entered text is a number, and usually a set of up and down buttons to step the value up and down.

**Предупреждение:** **Important**: Bear in mind that logically you should not be able to enter characters inside a number of input other than numbers. There seems to be some disagreement about this among browsers; see Firefox bug 1398528.

**Примечание:** It's crucial to remember that a user can tinker with your HTML behind the scenes, so your site *must not* use simple client-side validation for any security purposes. You *must* verify on the server side any transaction in which the provided value may have any security implications of any kind.

Mobile browsers further help with the user experience by showing a special keyboard more suited for entering numbers when the user tries to enter a value. The following screenshot is taken from Firefox for Android:

![](/ru/docs/Web/HTML/Element/input/number/number-keyboard-fxa.png)

### A simple number input

In its most basic form, a number input can be implemented like this:

```html
<label for="ticketNum">Number of tickets you would like to buy:</label>
<input id="ticketNum" type="number" name="ticketNum" value="0" />
```

A number input is considered valid when empty and when a single number is entered, but is otherwise invalid. If the `required` attribute is used, the input is no longer considered valid when empty.

**Примечание:** Any number is an acceptable value, as long as it is a valid floating point number (i.e. not NaN or Infinity).

### Placeholders

Sometimes it's helpful to offer an in-context hint as to what form the input data should take. This can be especially important if the page design doesn't offer descriptive labels for each `<input>`. This is where **placeholders** come in. A placeholder is a value most commonly used to provide a hint as to the format the input should take `value`. It is displayed inside the edit box when the element's `value` is `""`. Once data is entered into the box, the placeholder disappears; if the box is emptied, the placeholder reappears.

Here, we have an `number` input with the placeholder `"Multiple of 10"`. Note how the placeholder disappears and reappears as you manipulate the contents of the edit field.

```html
<input type="number" placeholder="Multiple of 10" />
```

### Controlling step size

By default, the up and down buttons provided for you to step the number up and down will step the value up and down by 1. You can change this by providing a `step` attribute, which takes as its value a number specifying the step amount. Our above example contains a placeholder saying that the value should be a multiple of 10, so it makes sense to add a `step` value of 10:

```html
<input type="number" placeholder="multiple of 10" step="10" />
```

In this example you should find that the up and down step arrows will increase and decrease the value by 10 each time, not 1. You can still manually enter a number that's not a multiple of 10, but it will be considered invalid.

### Specifying minimum and maximum values

You can use the `min` and `max` attributes to specify a minimum and maximum value that the field can have. For example, let's give our example a minimum of 0, and a maximum of 100:

```html
<input type="number" placeholder="multiple of 10" step="10" min="0" max="100" />
```

In this updated version, you should find that the up and down step buttons will not allow you to go below 0 or above 100. You can still manually enter a number outside these bounds, but it will be considered invalid.

### Allowing decimal values

One issue with number inputs is that their step size is 1 by default — if you try to enter a number with a decimal, such as "1.0", it will be considered invalid. If you want to enter a value that requires decimals, you'll need to reflect this in the `step` value (e.g. `step="0.01"` to allow decimals to two decimal places). Here's a simple example:

```html
<input type="number" placeholder="1.0" step="0.01" min="0" max="10" />
```

See that this example allows any value between 0.0 and 10.0, with decimals to two places. "9.52" is valid, but "9.521" is not, for example.

### Controlling input size

`<input>` elements of type `number` don't support form sizing attributes such as `size`. You'll have to resort to CSS to change the size of these controls.

For example, to adjust the width of the input to be only as wide as is needed to enter a three-digit number, we can change our HTML to include an ID and to shorten our placeholder since the field will be too narrow for the text we have been using so far:

```html
<input
 type="number"
 placeholder="x10"
 step="10"
 min="0"
 max="100"
 id="number" />
```

Then we add some CSS to narrow the width of the element with the ID `number`:

```css
#number {
  width: 3em;
}
```

The result looks like this:

### Offering suggested values

You can provide a list of default options from which the user can select by specifying the `list` attribute, which contains as its value the ID of a `<datalist>`, which in turn contains one `<option>` element per suggested value; each `option`'s `value` is the corresponding suggested value for the number entry box.

```html
<input id="ticketNum" type="number" name="ticketNum" list="defaultNumbers" />
<span class="validity"></span>

<datalist id="defaultNumbers">
  <option value="10045678"></option>
  <option value="103421"></option>
  <option value="11111111"></option>
  <option value="12345678"></option>
  <option value="12999922"></option>
</datalist>
```

**Примечание:** Use of the `list` attribute with `number` inputs is not supported in all browsers. It works in Chrome and Opera, for example, but not in Firefox.

Validation
----------

We have already mentioned a number of validation features of `number` inputs, but let's review them now:

* `<input type="number">` elements automatically invalidate any entry that isn't a number (or empty, unless `required` is specified).
* You can use the `required` attribute to make an empty entry invalid, i.e. the input has to be filled in.
* You can use the `step` attribute to constrain valid values to a certain set of steps (e.g. multiples of 10).
* You can use the `min` and `max` attributes to constrain valid values to lower and upper bounds.

The following example exhibits all of the above features, as well as using some CSS to display valid and invalid icons when the input value is valid/invalid:

```html
<form>
  <div>
    <label for="balloons">Number of balloons to order (multiples of 10):</label>
    <input
 id="balloons"
 type="number"
 name="balloons"
 step="10"
 min="0"
 max="100"
 required />
    <span class="validity"></span>
  </div>
  <div>
    <input type="submit" />
  </div>
</form>
```

Try submitting the form with different invalid values entered — e.g. no value, a value below 0 or above 100, a value that is not a multiple of 10, or a non-numerical value — and see how the error messages the browser gives you differ with different ones.

The CSS applied to this example is as follows:

```css
div {
  margin-bottom: 10px;
}

input:invalid + span:after {
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  content: "✓";
  padding-left: 5px;
}
```

Here we use the `:invalid` and `:valid` pseudo classes to display an appropriate invalid or valid icon as generated content on the adjacent `<span>` element, indicating if the current value is valid. We put it on a separate `<span>` element for added flexibility; some browsers don't display generated content very effectively on some types of form inputs (read for example the section on `<input type="date">` validation).

**Предупреждение:** **Important**: HTML form validation is *not* a substitute for server-side scripts that ensure that the entered data is in the proper format. It's far too easy for someone to make adjustments to the HTML that allow them to bypass the validation, or to remove it entirely. It's also possible for someone to bypass your HTML and submit the data directly to your server. If your server-side code fails to validate the data it receives, disaster could strike when improperly-formatted data is submitted (or data which is too large, is of the wrong type, and so forth).

### Pattern validation

`<input type="number">` elements do not support use of the `pattern` attribute for making entered values conform to a specific regex pattern. The rationale for this is that number inputs won't be valid if they contain anything except numbers, and you can constrain the minimum and maximum number of valid digits using the `min` and `max` attributes, as explained above.

Examples
--------

We've already covered the fact that by default, the increment is 1, and you can use the `step` attribute to allow decimal inputs. Let's take a closer look. In the following example we've set up a form for entering the user's height; it defaults to accepting a height in meters, but you can click the relevant button to change the form to accept feet and inches instead. The input for the height in meters accepts decimals to two places.

The HTML looks like this:

```html
<form>
    <div class="metersInputGroup">
        <label for="meters">Enter your height — meters:</label>
        <input id="meters" type="number" name="meters" step="0.01" min="0" placeholder="e.g. 1.78" required>
        <span class="validity"></span>
    </div>
        <span>Enter your height — </span>
        <label for="feet">feet:</label>
        <input id="feet" type="number" name="feet" min="0" step="1">
        <span class="validity"></span>
        <label for="inches">inches:</label>
        <input id="inches" type="number" name="inches" min="0" max="11" step="1">
        <span class="validity"></span>
    </div>
    <div>
      <input type="button" class="meters" value="Enter height in feet and inches">
    </div>
    <div>
        <input type="submit" value="Submit form">
    </div>
</form>
```

You'll see that we are using many of the attributes we've already looked at in the article earlier on. Since we want to accept a meter value in centimeters, we've set the `step` value to `0.01`, so that values like 1.78 are not seen as invalid. We've also provided a placeholder for that input.

We've hidden the feet and inches inputs initially using `class="hidden"` so that meters is the default entry type.

Now on to the CSS — this looks very similar to the validation styling we saw before; nothing remarkable here:

```css
div {
  margin-bottom: 10px;
  position: relative;
}

input[type="number"] {
  width: 100px;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

And finally, the JavaScript:

```js
var metersInputGroup = document.querySelector(".metersInputGroup");
var feetInputGroup = document.querySelector(".feetInputGroup");
var metersInput = document.querySelector("#meters");
var feetInput = document.querySelector("#feet");
var inchesInput = document.querySelector("#inches");
var switchBtn = document.querySelector('input[type="button"]');

switchBtn.addEventListener("click", function () {
  if (switchBtn.getAttribute("class") === "meters") {
    switchBtn.setAttribute("class", "feet");
    switchBtn.value = "Enter height in meters";

    metersInputGroup.style.display = "none";
    feetInputGroup.style.display = "block";

    feetInput.setAttribute("required", "");
    inchesInput.setAttribute("required", "");
    metersInput.removeAttribute("required");

    metersInput.value = "";
  } else {
    switchBtn.setAttribute("class", "meters");
    switchBtn.value = "Enter height in feet and inches";

    metersInputGroup.style.display = "block";
    feetInputGroup.style.display = "none";

    feetInput.removeAttribute("required");
    inchesInput.removeAttribute("required");
    metersInput.setAttribute("required", "");

    feetInput.value = "";
    inchesInput.value = "";
  }
});
```

After declaring a few variables, we add an event listener to the button to control the switching mechanism. This is pretty simple, mostly involving changing over the button class and label, and updating the display values of the two sets of inputs when the button is pressed. Note that we're not converting back and forth between meters and feet/inches here, which a real-life web application would probably do.

**Примечание:** Note that when the user clicks the button, we remove the `required` attribute(s) from the input(s) we are hiding, and empty the `value` attribute(s). This is so that we can submit the form if both input sets aren't filled in, and won't submit data that we didn't mean to submit. If we didn't do this, you'd have to fill in both feet/inches **and** meters to submit the form!

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

| Specification |
| --- |
| HTML Standard # number-state-(type=number) |

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

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

See also
--------

* HTML forms guide
* `<input>`
* `<input type="tel">`


<input type="image"> - HTML

<input type="image">
====================

`<input type="image"> - это кнопка отправки в виде изображения. Вы можете использовать атрибут src, чтобы выбрать источник изображения и атрибут alt, чтобы добавить альтернативный текст. Атрибутами width и height можно указать размер изображения в пикселях.`

| Разрешённое содержимое | Нету, это пустой элемент. |
| --- | --- |
| Необязательный закрывающийся тег | Обязательно должен быть открывающийся тег, и обязательно отсутствует закрывающий. |
| Разрешённые родительские элементы | Любой элемент, которому доступен фразообразующий контент (phrasing content (en-US)). |
| DOM-интерфейс | `HTMLInputElement` (en-US) |

Атрибуты
--------

Этому элементу доступны глобальные атрибуты (global attributes (en-US)).

`type`

`formaction`

The URI of a program that processes the information submitted by the input element, here image if specified, it overrides the `action` attribute of the element's form owner.

`formenctype`

If the input element is an image, this attribute specifies the type of content that is used to submit the form to the server. Possible values are:

* `application/x-www-form-urlencoded`: The default value if the attribute is not specified.
* `multipart/form-data`: Use this value if you are using an `<input>` element with the `type` attribute set to `file`.
* `text/plain` If this attribute is specified, it overrides the `enctype` attribute of the element's form owner.

`formmethod`

In image input element, this attribute specifies the HTTP method that the browser uses to submit the form. Possible values are:

* `post`: The data from the form is included in the body of the form and is sent to the server.
* `get`: The data from the form is appended to the **form** attribute URI, with a '?' as a separator, and the resulting URI is sent to the server. Use this method when the form has no side-effects and contains only ASCII characters.If specified, this attribute overrides the `method` attribute of the element's form owner.

`formnovalidate`

This Boolean attribute specifies that the form is not to be validated when it is submitted. If this attribute is specified, it overrides the `novalidate` attribute of the element's form owner.

`formtarget`

This attribute is a name or keyword indicating where to display the response that is received after submitting the form. This is a name of, or keyword for, a *browsing context* (for example, tab, window, or inline frame). If this attribute is specified, it overrides the `target` attribute of the element's form owner. The following keywords have special meanings:

* `_self`: Load the response into the same browsing context as the current one. This value is the default if the attribute is not specified.
* `_blank`: Load the response into a new unnamed browsing context.
* `_parent`: Load the response into the parent browsing context of the current one. If there is no parent, this option behaves the same way as `_self`.
* `_top`: Load the response into the top-level browsing context (that is, the browsing context that is an ancestor of the current one, and has no parent). If there is no parent, this option behaves the same way as `_self`.

`height`

This attribute defines the height of the image displayed for the button.

`required`

This attribute specifies that the user must fill in a value before submitting a form but it cannot be used when the **type** attribute is `image` type (`submit`, `reset`, or `button`). The `:optional` and `:required` CSS pseudo-classes will be applied to the field as appropriate.

`src`

This attribute specifies a URI for the location of an image to display on the graphical submit button; otherwise it is ignored.

`usemap`

The name of a `<map>` element as an image map.

`width`

This attribute defines the width of the image displayed for the button.

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

### Поле в виде логотипа Firefox

```html
<input type="image" name="image" src="fxlogo.png" width="50" />
```

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

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

| Specification |
| --- |
| HTML Standard # image-button-state-(type=image) |

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

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

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


<input type="color"> - HTML

<input type="color">
====================

`<input>` элементы типа **`color`** предоставляют элемент пользовательского интерфейса, который позволяет пользователю указать цвет либо с помощью визуального интерфейса выбора цвета, либо путём ввода цвета в текстовое поле в шестнадцатеричном формате #rrggbb. Разрешены только простые цвета (без альфа-канала), хотя CSS colors имеет больше форматов, например названия цветов, функциональные обозначения и шестнадцатеричный формат с альфа-каналом.

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

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

| **Value** | 7-значная `DOMString` , указывающая `<color>` в строчной шестнадцатеричной системе счисления |
| --- | --- |
| **События** | `change` и `input` |
| **Поддерживаемые общие атрибуты** | `autocomplete` и `list` |
| **IDL атрибуты** | `list` и `value` |
| **Методы** | `select()` (en-US) |

Value
-----

`value` элемента `<input>` типа `color` всегда является `DOMString`, который содержит 7-символьную строку, задающую цвет RGB в шестнадцатеричном формате. Хотя вы можете ввести цвет в верхнем или нижнем регистре, он будет сохранён в виде нижнего регистра. Value никогда не бывает в какой-либо другой форме и никогда не бывает пустым.

**Примечание:** установка значения на всё, что не является допустимым, полностью непрозрачным цветом RGB в шестнадцатеричной системе счисления, приведёт к тому, что значение будет установлено на #000000. В частности, вы не можете использовать стандартные имена цветов CSS или любой синтаксис функций CSS для установки значения. Это имеет смысл, если иметь в виду, что HTML и CSS-это отдельные языки и спецификации. Кроме того, цвета с альфа-каналом не поддерживаются; указание цвета в 9-символьной шестнадцатеричной системе счисления (например, #009900aa) также приведёт к тому, что цвет будет установлен на #000000.

Использование настроек цвета
----------------------------

Входные данные типа `color` просты из-за ограниченного числа атрибутов, которые они поддерживают.

### Предоставление цвета по умолчанию

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

```html
<input type="color" value="#ff0000" />
```

Если вы не зададите значение, то по умолчанию будет `#000000`, то есть чёрный цвет. Значение должно быть в семизначной шестнадцатеричной системе счисления, то есть символ"#", за которым следуют две цифры, каждая из которых представляет красный, зелёный и синий цвета, например: #rrggbb. Если у вас есть цвета в любом другом формате (например, имена цветов CSS или цветовые функции CSS, такие как rgb () или rgba ()), вам придётся преобразовать их в шестнадцатеричные перед установкой значения.

### Отслеживание изменений цвета

Как и в случае с другими типами `<input>`, есть два события, которые могут быть использованы для обнаружения изменения цвета значения: `input` и `change`. `input` запускается на элементе `<input>` каждый раз, когда меняется цвет. `change` событие запускается, когда пользователь отклоняет средство выбора цвета. В обоих случаях вы можете определить новое значение элемента, посмотрев на его `value`.

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

```js
colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

function watchColorPicker(event) {
  document.querySelectorAll("p").forEach(function (p) {
    p.style.color = event.target.value;
  });
}
```

### Выбор значения

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

```js
colorWell.select();
```

### Вариации внешнего вида

Как уже упоминалось ранее, когда браузер не поддерживает интерфейс выбора цвета, его реализация цветовых входов будет представлять собой текстовое поле, которое автоматически проверяет содержимое, чтобы убедиться, что значение находится в правильном формате. Например, в Safari 10.1 вы увидите что-то похожее на это:
 ![Screenshot of the example taken in Safari.](/ru/docs/Web/HTML/Element/input/color/input-color-safari.png)

То же самое можно увидеть и в Firefox 55:
 ![Screenshot of the example taken in Firefox 55 for macOS](/ru/docs/Web/HTML/Element/input/color/input-color-firefox.png)

В этом случае при нажатии на цветовой колодец отображается палитра цветов платформы, из которой вы можете выбрать нужный цвет (в данном случае это палитра macOS):

![Screenshot of the element with the color picker open in Firefox Mac.](/ru/docs/Web/HTML/Element/input/color/input-with-picker-firefox-mac.png)

Validation
----------

Значение цветового ввода считается недопустимым, если user agent не может преобразовать пользовательский ввод в семизначную строчную шестнадцатеричную нотацию. В этом случае к элементу применяется псевдокласс `:invalid`.

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

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

### HTML

HTML довольно прост — пара абзацев описательного материала с `<input>` типа `color` с идентификатором `colorWell`, который мы будем использовать для изменения цвета текста абзацев.

```html
<p>
  An example demonstrating the use of the
  <code><input type="color"></code> control.
</p>

<label for="colorWell">Color:</label>
<input type="color" value="#ff0000" id="colorWell" />

<p>
  Watch the paragraph colors change when you adjust the color picker. As you
  make changes in the color picker, the first paragraph's color changes, as a
  preview (this uses the <code>input</code> event). When you close the color
  picker, the <code>change</code> event fires, and we detect that to change
  every paragraph to the selected color.
</p>
```

### JavaScript

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

```js
var colorWell;
var defaultColor = "#0000ff";

window.addEventListener("load", startup, false);
```

#### Инициализация

Как только страница загружена, вызывается наш обработчик событий загрузки `startup()`:

```js
function startup() {
  colorWell = document.querySelector("#colorWell");
  colorWell.value = defaultColor;
  colorWell.addEventListener("input", updateFirst, false);
  colorWell.addEventListener("change", updateAll, false);
  colorWell.select();
}
```

Это возвращает ссылку на элемент color **`<input>`** в переменной `colorWell`, а затем устанавливает значение входного цвета в значение `defaultColor`. То цвет входное `input` событие настроено, чтобы вызвать `updateFirst()` функцию и `change` событие, вызывается `updateAll()`. Они оба видны ниже.

Наконец, мы вызываем  `select ()` (en-US) для выбора текстового содержимого цветового ввода, если элемент управления реализован в виде текстового поля (это не имеет никакого эффекта, если вместо него предусмотрен интерфейс выбора цвета).

#### Реакция на изменение цвета

Мы предоставляем две функции, которые имеют дело с изменением цвета. Функция `updateFirst()` вызывается в ответ на `input` событие. Он изменяет цвет первого элемента абзаца в документе, чтобы соответствовать новому значению входного цвета. Поскольку `input` события запускаются каждый раз, когда производится корректировка значения (например, если яркость цвета увеличивается), они будут происходить повторно при использовании средства выбора цвета.

```js
function updateFirst(event) {
  var p = document.querySelector("p");

  if (p) {
    p.style.color = event.target.value;
  }
}
```

Когда средство выбора цвета закрывается, указывая, что значение больше не будет меняться (если пользователь повторно не откроет средство выбора цвета), в элемент отправляется событие `change`. Мы обрабатываем это событие с помощью функции `updateAll()`, используя `Event.target.value` для получения окончательного выбранного цвета:

```js
function updateAll(event) {
  document.querySelectorAll("p").forEach(function (p) {
    p.style.color = event.target.value;
  });
}
```

Это устанавливает цвет каждого элемента `<p>` таким образом, чтобы его атрибут `color` (en-US) соответствовал текущему значению входного цвета, на которое ссылаются с помощью `event.target`.

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

Финальный результат выглядит так:

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

| Specification |
| --- |
| HTML Standard # color-state-(type=color) |

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

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

Изучите также
-------------

* Compatibility of CSS properties (en-US)


<input type="file"> - HTML

<input type="file">
===================

`<input>` элемент с атрибутом **`type="file"`** позволяет пользователю выбрать один файл или более из файлового хранилища своего устройства. После выбора эти файлы могут быть загружены на сервер при помощи формы, или обработаны JavaScript и File API.

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

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

Атрибут `value` элемента `input` содержит строку, представляющую путь к выбранному файлу или файлам. Если пользователь выбрал несколько файлов, `value` представляет первый файл из списка. Остальные файлы можно определить используя свойство `HTMLInputElement.files` элемента `input`.

**Примечание:** Значение всегда представляет собой имя файла, начинающееся с `C:\fakepath\` и не является настоящим расположением файла. Это сделано для того, чтобы вредоносное ПО не могло получить информацию о файловой структуре пользователя.

Additional attributes
---------------------

In addition to the common attributes shared by all `<input>` elements, inputs of type `file` also support:

`files`

A `FileList` object that lists every selected file. This list has no more than one member unless the `multiple` attribute is specified.

Using file inputs
-----------------

### A basic example

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="file">Choose file to upload</label>
    <input type="file" id="file" name="file" multiple />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
}
```

This produces the following output:

**Примечание:** You can find this example on GitHub too — see the source code, and also see it running live.

Regardless of the user's device or operating system, the file input provides a button that opens up a file picker dialog that allows the user to choose a file.

Including the `multiple` attribute, as shown above, specifies that multiple files can be chosen at once. The user can choose multiple files from the file picker in any way that their chosen platform allows (e.g. by holding down `Shift` or `Control`, and then clicking). If you only want the user to choose a single file per `<input>`, omit the `multiple` attribute.

When the form is submitted, each selected file's name will be added to URL parameters in the following fashion: `?file=file1.txt&file=file2.txt`

### Getting information on selected files

The selected files' are returned by the element's `HTMLInputElement.files` property, which is a `FileList` object containing a list of `File` objects. The `FileList` behaves like an array, so you can check its `length` property to get the number of selected files.

Each `File` object contains the following information:

`name`

The file's name.

`lastModified`

A number specifying the date and time at which the file was last modified, in milliseconds since the UNIX epoch (January 1, 1970 at midnight).

`lastModifiedDate`
Устарело

A `Date` object representing the date and time at which the file was last modified. *This is deprecated and should not be used. Use `lastModified` instead.*

`size`

The size of the file in bytes.

`type`

The file's MIME type.

webkitRelativePath
Non-standard

A string specifying the file's path relative to the base directory selected in a directory picker (that is, a `file` picker in which the `webkitdirectory` attribute is set). *This is non-standard and should be used with caution.*

**Примечание:** You can set as well as get the value of `HTMLInputElement.files` in all modern browsers; this was most recently added to Firefox, in version 57 (see Firefox bug 1384030).

### Limiting accepted file types

Often you won't want the user to be able to pick any arbitrary type of file; instead, you often want them to select files of a specific type or types. For example, if your file input lets users upload a profile picture, you probably want them to select web-compatible image formats, such as JPEG or PNG (en-US).

Acceptable file types can be specified with the `accept` attribute, which takes a comma-separated list of allowed file extensions or MIME types. Some examples:

* `accept="image/png"` or `accept=".png"` — Accepts PNG files.
* `accept="image/png, image/jpeg"` or `accept=".png, .jpg, .jpeg"` — Accept PNG or JPEG files.
* `accept="image/*"` — Accept any file with an `image/*` MIME type. (Many mobile devices also let the user take a picture with the camera when this is used.)
* `accept=".doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"` — accept anything that smells like an MS Word document.

Let's look like a more complete example:

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="profile\_pic">Choose file to upload</label>
    <input
 type="file"
 id="profile\_pic"
 name="profile\_pic"
 accept=".jpg, .jpeg, .png" />
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
}
```

This produces a similar-looking output to the previous example:

**Примечание:** You can find this example on GitHub too — see the source code, and also see it running live.

It may look similar, but if you try selecting a file with this input, you'll see that the file picker only lets you select the file types specified in the `accept` value (the exact nature differs across browsers and operating systems).

![Screenshot of a macOS file picker dialog. Files other than JPEG are grayed-out and unselectable.](/ru/docs/Web/HTML/Element/input/file/file-chooser.png)

The `accept` attribute doesn't validate the types of the selected files; it simply provides hints for browsers to guide users towards selecting the correct file types. It is still possible (in most cases) for users to toggle an option in the file chooser that makes it possible to override this and select any file they wish, and then choose incorrect file types.

Because of this, you should make sure that the `accept` attribute is backed up by appropriate server-side validation.

Examples
--------

In this example, we'll present a slightly more advanced file chooser that takes advantage of the file information available in the `HTMLInputElement.files` (en-US) property, as well as showing off a few clever tricks.

**Примечание:** You can see the complete source code for this example on GitHub — file-example.html (see it live also). We won't explain the CSS; the JavaScript is the main focus.

First of all, let's look at the HTML:

```html
<form method="post" enctype="multipart/form-data">
  <div>
    <label for="image\_uploads">Choose images to upload (PNG, JPG)</label>
    <input
 type="file"
 id="image\_uploads"
 name="image\_uploads"
 accept=".jpg, .jpeg, .png"
 multiple />
  </div>
  <div class="preview">
    <p>No files currently selected for upload</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
html {
  font-family: sans-serif;
}

form {
  width: 600px;
  background: #ccc;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid black;
}

form ol {
  padding-left: 0;
}

form li,
div > p {
  background: #eee;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  list-style-type: none;
  border: 1px solid black;
}

form img {
  height: 64px;
  order: 1;
}

form p {
  line-height: 32px;
  padding-left: 10px;
}

form label,
form button {
  background-color: #7f9ccb;
  padding: 5px 10px;
  border-radius: 5px;
  border: 1px ridge black;
  font-size: 0.8rem;
  height: auto;
}

form label:hover,
form button:hover {
  background-color: #2d5ba3;
  color: white;
}

form label:active,
form button:active {
  background-color: #0d3f8f;
  color: white;
}
```

This is similar to what we've seen before — nothing special to comment on.

Next, let's walk through the JavaScript.

In the first lines of script, we get references to the form input itself, and the `<div>` element with the class of `.preview`. Next, we hide the `<input>` element — we do this because file inputs tend to be ugly, difficult to style, and inconsistent in their design across browsers. You can activate the input element by clicking its `<label>`, so it is better to visually hide the input and style the label like a button, so the user will know to interact with it if they want to upload files.

```js
var input = document.querySelector("input");
var preview = document.querySelector(".preview");

input.style.opacity = 0;
```

**Примечание:** `opacity` is used to hide the file input instead of `visibility: hidden` or `display: none`, because assistive technology interprets the latter two styles to mean the file input isn't interactive.

Next, we add an event listener to the input to listen for changes to its selected value changes (in this case, when files are selected). The event listener invokes our custom `updateImageDisplay()` function.

```js
input.addEventListener("change", updateImageDisplay);
```

Whenever the `updateImageDisplay()` function is invoked, we:

* Use a `while` loop to empty the previous contents of the preview `<div>`.
* Grab the `FileList` object that contains the information on all the selected files, and store it in a variable called `curFiles`.
* Check to see if no files were selected, by checking if `curFiles.length` is equal to 0. If so, print a message into the preview `<div>` stating that no files have been selected.
* If files *have* been selected, we loop through each one, printing information about it into the preview `<div>`. Things to note here:
* We use the custom `validFileType()` function to check whether the file is of the correct type (e.g. the image types specified in the `accept` attribute).
* If it is, we:
    + Print out its name and file size into a list item inside the previous `<div>` (obtained from `curFiles[i].name` and `curFiles[i].size`). The custom `returnFileSize()` function returns a nicely-formatted version of the size in bytes/KB/MB (by default the browser reports the size in absolute bytes).
    + Generate a thumbnail preview of the image by calling `window.URL.createObjectURL(curFiles[i])` and reducing the image size in the CSS, then insert that image into the list item too.
* If the file type is invalid, we display a message inside a list item telling the user that they need to select a different file type.

```js
function updateImageDisplay() {
  while (preview.firstChild) {
    preview.removeChild(preview.firstChild);
  }

  var curFiles = input.files;
  if (curFiles.length === 0) {
    var para = document.createElement("p");
    para.textContent = "No files currently selected for upload";
    preview.appendChild(para);
  } else {
    var list = document.createElement("ol");
    preview.appendChild(list);
    for (var i = 0; i < curFiles.length; i++) {
      var listItem = document.createElement("li");
      var para = document.createElement("p");
      if (validFileType(curFiles[i])) {
        para.textContent =
          "File name " +
          curFiles[i].name +
          ", file size " +
          returnFileSize(curFiles[i].size) +
          ".";
        var image = document.createElement("img");
        image.src = window.URL.createObjectURL(curFiles[i]);

        listItem.appendChild(image);
        listItem.appendChild(para);
      } else {
        para.textContent =
          "File name " +
          curFiles[i].name +
          ": Not a valid file type. Update your selection.";
        listItem.appendChild(para);
      }

      list.appendChild(listItem);
    }
  }
}
```

The custom `validFileType()` function takes a `File` object as a parameter, then loops through the list of allowed file types, checking if any matches the file's `type` property. If a match is found, the function returns `true`. If no match is found, it returns `false`.

```js
var fileTypes = ["image/jpeg", "image/pjpeg", "image/png"];

function validFileType(file) {
  for (var i = 0; i < fileTypes.length; i++) {
    if (file.type === fileTypes[i]) {
      return true;
    }
  }

  return false;
}
```

The `returnFileSize()` function takes a number (of bytes, taken from the current file's `size` property), and turns it into a nicely formatted size in bytes/KB/MB.

```js
function returnFileSize(number) {
  if (number < 1024) {
    return number + "bytes";
  } else if (number > 1024 && number < 1048576) {
    return (number / 1024).toFixed(1) + "KB";
  } else if (number > 1048576) {
    return (number / 1048576).toFixed(1) + "MB";
  }
}
```

The example looks like this; have a play:

Техническое резюме
------------------

|  |  |
| --- | --- |
| **Значение** | Строка, содержащая путь к файлу |
| **События** | `change` и `input` |
| **Поддерживаемые общие атрибуты** | `required` |
| **Дополнительные атрибуты** | `accept`,
 `capture` (en-US),
 `multiple` |
| **IDL-атрибуты** | `files` и `value` |
| **DOM-интерфейс** | `HTMLInputElement` (en-US) |
| **Методы** | `select()` (en-US) |
| **Неявная ARIA-роль** | `нет соответствующей роли` |

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

| Specification |
| --- |
| HTML Standard # file-upload-state-(type=file) |

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

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

See also
--------

* Using files from web applications — contains a number of other useful examples related to `<input type="file">` and the File API.


HTML attribute: pattern - HTML

HTML attribute: pattern
=======================

Атрибут **`pattern`** определяет регулярное выражение, которому должно соответствовать значение элемента формы. Если ненулевое значение не соответствует ограничениям, установленным в `pattern`, доступное только для чтения свойство `patternMismatch` объекта `ValidityState` будет истинным.

Атрибут `pattern` является атрибутом для полей ввода с типом text (en-US), tel, email (en-US), url (en-US), password, и search (en-US).

The `pattern` attribute, when specified, is a regular expression which the input's `value` must match in order for the value to pass constraint validation (en-US). It must be a valid JavaScript regular expression, as used by the `RegExp` type, and as documented in our guide on regular expressions; the `'u'` flag is specified when compiling the regular expression, so that the pattern is treated as a sequence of Unicode code points, instead of as ASCII. No forward slashes should be specified around the pattern text.

If the specified pattern is not specified or is invalid, no regular expression is applied and this attribute is ignored.

**Примечание:** Use the `title` attribute to specify text that most browsers will display as a tooltip to explain what the requirements are to match the pattern. You **must not** rely on the tooltip alone for an explanation. See below for more information on usability.

Some of the input types supporting the pattern attribute, notably the email (en-US) and url (en-US) input types, have expected value syntaxes that must be matched. If the pattern attribute isn't present, and the value doesn't match the expected syntax for that value type, the `ValidityState` object's read-only `typeMismatch` property will be true.

### Usability

When including a `pattern`, provide a description of the pattern in visible text near the control. Additionally, include a `title` (en-US) attribute which gives a description of the pattern. User agents may use the title contents during constraint validation to tell the user that the pattern is not matched. Some browsers show a tooltip with title contents, improving usability for sighted users. Additionally, assistive technology may read the title aloud when the control gains focus, but this should not be relied upon for accessibility.

### Constraint validation

 If the input's value is not the empty string and the value does not match the entire regular expression, there is a from a `patternMismatch`.
 The pattern's regular expression, when matched against the value, must have its start anchored to the start of the string and its end anchored to the end of the string, which is slightly different from JavaScript regular expressions: in the case of pattern attribute, we are matching against the entire value, not just any subset, as if a `^(?:` were implied at the start of the pattern and `)$` at the end.

Examples
--------

Given the following:

```html
<p>
  <label
 >Enter your phone number in the format (123)456-7890 (<input
 name="tel1"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit area code"
 size="2" />)-
    <input
 name="tel2"
 type="tel"
 pattern="[0-9]{3}"
 placeholder="###"
 aria-label="3-digit prefix"
 size="2" />
    -
    <input
 name="tel3"
 type="tel"
 pattern="[0-9]{4}"
 placeholder="####"
 aria-label="4-digit number"
 size="3" />
  </label>
</p>
```

Here we have 3 sections for a north American phone number with an implicit label encompassing all three components of the phone number, expecting 3-digits, 3-digits and 4-digits respectively, as defined by the `pattern` attribute set on each.

If the values are too long or too short, or contain characters that aren't digits, the patternMismatch will be true. When `true`, the element matches the `:invalid` CSS pseudo-classes.

```css
input:invalid {
  border: red solid 3px;
}
```

Had we used `minlength` (en-US) and `maxlength` (en-US) attributes instead, we may have seen `validityState.tooLong` or `validityState.tooShort` being true.

### Specifying a pattern

You can use the `pattern` attribute to specify a regular expression that the inputted value must match in order to be considered valid (see Validating against a regular expression (en-US) for a simple crash course on using regular expressions to validate inputs).

The example below restricts the value to 4-8 characters and requires that it contain only lower-case letters.

```html
<form>
  <div>
    <label for="uname">Choose a username: </label>
    <input
 type="text"
 id="uname"
 name="name"
 required
 size="45"
 pattern="[a-z]{4,8}"
 title="4 to 8 lowercase letters" />
    <span class="validity"></span>
    <p>Usernames must be lowercase and 4-8 characters in length.</p>
  </div>
  <div>
    <button>Submit</button>
  </div>
</form>
```

```
div {
  margin-bottom: 10px;
  position: relative;
}

p {
  font-size: 80%;
  color: #999;
}

input + span {
  padding-right: 30px;
}

input:invalid + span:after {
  position: absolute;
  content: "✖";
  padding-left: 5px;
}

input:valid + span:after {
  position: absolute;
  content: "✓";
  padding-left: 5px;
}
```

This renders like so:

### Accessibility Concerns

When a control has a `pattern` attribute, the `title` attribute, if used, must describe the pattern. Relying on the `title` attribute for the visual display of text content is generally discouraged as many user agents do not expose the attribute in an accessible manner. Some browsers show a tooltip when an element with a title is hovered, but that leaves out keyboard-only and touch-only users. This is one of the several reasons you must include information informing users how to fill out the the control to match the requirements.

While `title`s are used by some browsers to populate error messaging, because browsers sometimes also show the title as text on hover, it therefore shows in non-error situations, so be careful not to word titles as if an error has occurred.

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

| Specification |
| --- |
| HTML Standard # attr-input-pattern |

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

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

See also
--------

* Constraint validation (en-US)
* Forms: Data form validation (en-US)
* Regular Expressions


CORS settings attributes - HTML

CORS settings attributes
========================

В HTML5 некоторые теги поддерживают CORS (en-US), например `<img>` или `<video>`, имеют атрибут `crossorigin` (`crossOrigin` свойство), которое позволяет настроить CORS запросы для данных получаемых элементом. Эти атрибуты могут иметь следующие значения:

| Ключевое слово | Описание |
| --- | --- |
| `anonymous` | CORS запросы от этого элемента не будут передавать учётные данные. |
| `use-credentials` | CORS запросы от этого элемента будут передавать учётные данные. |

По умолчанию (если значение атрибута не задано), CORS не используется вообще. Ключевое слово "anonymous" означает что не будет обмена **учётных данных**(user credentials) через cookies, client-side SSL сертификаты или HTTP аутентификацию как описано в Секции Терминология CORS спецификации.

Неправильное ключевое слово или пустая строка, будет обработано как `anonymous`.

### Пример: crossorigin с тегом script

Используя тег `<script>` вы можете указать браузеру выполнять код `https://example.com/example-framework.js` без передачи user-credentials.

```html
<script
 src="https://example.com/example-framework.js"
 crossorigin="anonymous"></script>
```

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

| Specification |
| --- |
| HTML Standard # cors-settings-attributes |

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

### html.elements.img.crossorigin

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

### html.elements.link.crossorigin

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

### html.elements.script.crossorigin

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

### html.elements.video.crossorigin

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

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

* HTTP access control


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

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

CSS псевдокласс **`:nth-child()`** находит один или более элементов, основываясь на их позиции среди группы соседних элементов.

```css
/\* Выбирает каждый четвёртый элемент
 среди любой группы соседних элементов \*/
:nth-child(4n) {
  color: lime;
}
```

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

Псевдокласс `nth-child` указывается с единственным аргументом, описывающим паттерн для выбирания элементов.

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

`odd`

Описывает элементы среди группы соседних с нечётными номерами 1, 3, 5, и т. д.

`even`

Описывает элементы среди группы соседних с чётными номерами 2, 4, 6, и т. д.

### Функциональная запись

`<An+B>`

Описывает элементы среди группы соседних с номерами, соответствующими паттерну `An+B` (для каждого целого числа n >= 0). Нумерация элементов начинается с единицы. Значения `A` и `B` должны быть `<integer>`s.

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

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

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

`tr:nth-child(odd)` или `tr:nth-child(2n+1)`

Описывает нечётные строки HTML таблицы: 1, 3, 5, и т. д.

`tr:nth-child(even)` or `tr:nth-child(2n)`

Описывает чётные строки HTML таблицы: 2, 4, 6, и т. д.

`:nth-child(7)`

Описывает седьмой элемент.

`:nth-child(5n)`

Описывает элементы с номерами 5, 10, 15, и т. д.

`:nth-child(3n+4)`

Описывает элементы с номерами 4, 7, 10, 13, и т. д.

`:nth-child(-n+3)`

Описывает первые три элемента среди группы соседних элементов.

`p:nth-child(n)`

Описывает каждый элемент `<p>` среди группы соседних элементов. Эквивалентно простому селектору `p`.

`p:nth-child(1)` или `p:nth-child(0n+1)`

Описывает каждый элемент `<p>`, являющийся первым среди группы соседних элементов. Эквивалентно селектору `:first-child`.

### Подробный пример

#### HTML

```html
<h3>
  <code>span:nth-child(2n+1)</code>, БЕЗ элемента <code><em></code> в
  группе элементов-потомков.
</h3>
<p>Элементы 1, 3, 5 и 7 будут выбраны.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br />

<h3>
  <code>span:nth-child(2n+1)</code>, С элементом <code><em></code> в
  группе элементов-потомков.
</h3>
<p>
  Элементы 1, 5 и 7 будут выбраны.<br />
  3 используется в подсчёте потому что это элемент-потомок, но он не выбран
  потому что он не <code><span></code>.
</p>
<div class="second">
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br />

<h3>
  <code>span:nth-of-type(2n+1)</code>, С элементом <code><em></code> в
  группе элементов-потомков.
</h3>
<p>
  Элементы 1, 4, 6 и 8 будут выбраны.<br />
  3 не используется в подсчёте и не выбран, потому что это
  <code><em></code>, но не <code><span></code>, а
  <code>nth-of-type</code> выбирает только потомков этого типа. Элемент
  <code><em></code> полностью пропускается и игнорируется.
</p>
<div class="third">
  <span>Span!</span>
  <span>Span</span>
  <em>Это `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>
```

#### CSS

```css
html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}

.first span:nth-child(2n + 1),
.second span:nth-child(2n + 1),
.third span:nth-of-type(2n + 1) {
  background-color: lime;
}
```

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

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

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

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

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

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

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


Псевдоэлементы - CSS: каскадные таблицы стилей

Псевдоэлементы
==============

**Псевдоэлемент** в CSS — *это ключевое слово, добавляемое к селектору,* которое позволяет стилизовать определённую часть выбранного элемента. Например, псевдоэлемент `::first-line` может быть использован для изменения шрифта первой строки абзаца.

```css
/\* Первая строка каждого элемента <p>. \*/
p::first-line {
  color: blue;
  text-transform: uppercase;
}
```

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

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

selector::pseudo-element {
  property: value;
}
```

В селекторе можно использовать только один псевдоэлемент. Он должен находиться после простых селекторов в выражении.

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

Список стандартных псевдоэлементов
----------------------------------

* `::after`
* `::before`
* `::cue`
* `::first-letter`
* `::first-line`
* `::selection`
* `::slotted`
* `::backdrop`
Экспериментальная возможность
* `::placeholder`
Экспериментальная возможность
* `::marker`
Экспериментальная возможность
* `::spelling-error` (en-US)
Экспериментальная возможность
* `::grammar-error`
Экспериментальная возможность

| Браузер | Начиная с версии | Поддерживает |
| --- | --- | --- |
| Internet Explorer | 8.0 | `:pseudo-element` |
| 9.0 | `:pseudo-element ::pseudo-element` |
| Firefox (Gecko) | 1.0 (1.0) | `:pseudo-element` |
| 1.0 (1.5) | `:pseudo-element ::pseudo-element` |
| Opera | 4.0 | `:pseudo-element` |
| 7.0 | `:pseudo-element ::pseudo-element` |
| Safari (WebKit) | 1.0 (85) | `:pseudo-element ::pseudo-element` |

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

* Псевдоклассы


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

::after (:after)
================

В CSS, **`::after`** создаёт псевдоэлемент, который является последним потомком выбранного элемента. Часто используется для добавления косметического содержимого в элемент с помощью свойства `content`. По умолчанию является инлайновым.

```css
/\* Добавить стрелки после ссылок \*/
a::after {
  content: "→";
}
```

**Примечание:** Псведоэлементы, созданные с помощью `::before` и `::after` содержатся в блоке форматирования элемента, и поэтому не применяются к *замещаемым элементам*, таким как `<img>` или `<br>`.

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

Error: could not find syntax for this item

**Примечание:** В CSS3 появилась запись `::after` (с двумя двоеточиями) для различения псевдоклассов и псевдоэлементов. Браузеры также поддерживают запись `:after`, введённую в CSS2.

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

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

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

#### HTML

```html
<p class="boring-text">Вот простой скучный текст.</p>
<p>Вот нормальный текст, который не является ни скучным, ни потрясающим.</p>
<p class="exciting-text">
  Помогать MDN легко и весело. Просто нажмите кнопку редактирования, чтобы
  добавить новые живые примеры, или улучшить существующие примеры.
</p>
```

#### CSS

```css
.exciting-text::after {
  content: "<- теперь это \*просто\* потрясающе!";
  color: green;
}

.boring-text::after {
  content: "<- СКУЧНО!";
  color: red;
}
```

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

### Пример оформления

Можно стилизовать текст или изображения в свойстве `content` практически любым способом.

#### HTML

```html
<span class="ribbon">Посмотрите, где находится оранжевый прямоугольник.</span>
```

#### CSS

```css
.ribbon {
  background-color: #5bc8f7;
}

.ribbon::after {
  content: "Посмотрите на этот оранжевый прямоугольник.";
  background-color: #ffba10;
  border-color: black;
  border-style: dotted;
}
```

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

### Подсказки

Следующий пример показывает использование псевдоэлемента `::after` в сочетании с CSS-выражением `attr()` и пользовательского `data-*` атрибута `data-descr` для создания *подсказки* на чистом CSS.

#### HTML

```html
<p>
  Здесь находится живой пример вышеприведённого кода.<br />
  У нас есть некоторый
  <span data-descr="коллекция слов и знаков препинаний">текст</span> здесь с
  несколькими
  <span data-descr="маленькие всплывающие окошки, которые снова исчезают"
 >подсказками</span
 >.<br />
  Не стесняйтесь, наводите мышку чтобы
  <span data-descr="не понимать буквально">взглянуть</span>.
</p>
```

#### CSS

```css
span[data-descr] {
  position: relative;
  text-decoration: underline;
  color: #00f;
  cursor: help;
}

span[data-descr]:hover::after {
  content: attr(data-descr);
  position: absolute;
  left: 0;
  top: 24px;
  min-width: 200px;
  border: 1px #aaaaaa solid;
  border-radius: 10px;
  background-color: #ffffcc;
  padding: 12px;
  color: #000000;
  font-size: 14px;
  z-index: 1;
}
```

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

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

| Specification |
| --- |
| CSS Pseudo-Elements Module Level 4 # generated-content |

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

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

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

* `::before`, `content`


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

line-break
==========

CSS-свойство **`line-break`** устанавливает способ разрыва строки текста на китайском, японском или корейском (CJK) при работе с пунктуацией и символами.

```css
/\* Ключевые слова \*/
line-break: auto;
line-break: loose;
line-break: normal;
line-break: strict;

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

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

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

### Значения

`auto`

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

`loose`

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

`normal`

Разрыв текста, используя наиболее распространённое правило разрыва строки.

`strict`

Разрыв текста, используя самое строгое правило разрыва строки.

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

line-break =
  auto      | (en-US)
  loose     | (en-US)
  normal    | (en-US)
  strict    | (en-US)
  anywhere

```

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

| Specification |
| --- |
| CSS Text Module Level 3 # line-break-property |

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

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


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

object-fit
==========

Свойство **`object-fit`** определяет, как содержимое заменяемого элемента, такого как `<img>` или `<video>`, должно заполнять контейнер относительно его высоты и ширины.

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

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

Для `object-fit` можно указать одно из нижеперечисленных свойств.

### Значения

`fill`

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

`contain`

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

`cover`

Смещаемый контент меняет свой размер таким образом, чтобы сохранять свои пропорции при заполнении блока: окончательный размер контента будет определён как "покрытие" блока, ограничиваясь его шириной и высотой.

`none`

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

`scale-down`

Контент изменяет размер, сравнивая разницу между `none` и `contain`, для того, чтобы найти наименьший конкретный размер объекта.

### Правильный синтаксис
```

object-fit =
  fill        | (en-US)
  contain     | (en-US)
  cover       | (en-US)
  none        | (en-US)
  scale-down

```

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

### HTML Контент

```html
<div>
  <h2>object-fit: fill</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="fill" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="fill narrow" />

  <h2>object-fit: contain</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="contain" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="contain narrow" />

  <h2>object-fit: cover</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="cover" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="cover narrow" />

  <h2>object-fit: none</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="none" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="none narrow" />

  <h2>object-fit: scale-down</h2>
  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="scale-down" />

  <img src="mdn\_logo\_only\_color.png" alt="MDN Logo" class="scale-down narrow" />
</div>
```

### CSS Контент

```css
h2 {
  font-family:
    Courier New,
    monospace;
  font-size: 1em;
  margin: 1em 0 0.3em;
}

div {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: flex-start;
  height: 940px;
}

img {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
}

.narrow {
  width: 100px;
  height: 150px;
  margin-top: 10px;
}

.fill {
  object-fit: fill;
}

.contain {
  object-fit: contain;
}

.cover {
  object-fit: cover;
}

.none {
  object-fit: none;
}

.scale-down {
  object-fit: scale-down;
}
```

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

Технические параметры
---------------------

| Specification |
| --- |
| CSS Images Module Level 3 # the-object-fit |

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

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

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

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

* Другие свойства CSS, связанные с изображениями (картинками): `object-position`, `image-orientation` (en-US), `image-rendering` (en-US), `image-resolution` (en-US).
* `background-size`


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

margin
======

CSS свойство **`margin`** определяет внешний отступ на всех четырёх сторонах элемента. Это сокращение, которое устанавливает все отдельные поля одновременно: `margin-top`, `margin-right`, `margin-bottom` и `margin-left`.

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

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

Данное свойство является сокращением для следующих CSS свойств:

* `margin-top`
* `margin-right`
* `margin-bottom`
* `margin-left`
Синтаксис
---------

```css
/\* Применяется ко всем четырём сторонам \*/
margin: 1em;
margin: -3px;

/\* по вертикали | по горизонтали \*/
margin: 5% auto;

/\* сверху | горизонтально | снизу \*/
margin: 1em auto 2em;

/\* сверху | справа | снизу | слева \*/
margin: 2px 1em 0 auto;

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

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

* Когда определено **одно** значение, такое значение определено для **всех четырёх сторон**.
* Когда определены **два** значения, то первое значение определяет внешний отступ для **верхней и нижней** стороны, а второе значение определяет отступ для **левой и правой стороны**.
* Когда определены **три** значение, то первое значение определяет внешний отступ для **верхней** стороны, второе значение определяет внешний отступ для **левой и правой стороны**, а третье значение определяет отступ для **нижней** стороны.
* Когда определены **четыре** значения, они определяют внешние отступы для **верхней** стороны, **справа**, **снизу** и **слева** в рассмотренном порядке (по часовой стрелке).
### Значения

**`<length>`**

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

`<percentage>`

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

`auto`

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

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

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

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

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

```

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

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

#### HTML

```html
<div class="center">Этот элемент отцентрирован.</div>

<div class="outside">
  Этот элемент расположен за пределами своего контейнера.
</div>
```

#### CSS

```css
.center {
  margin: auto;
  background: lime;
  width: 66%;
}

.outside {
  margin: 3rem 0 0 -3rem;
  background: cyan;
  width: 66%;
}
```

### Больше примеров

```css
margin: 5%;
/\* все стороны: отступ 5% \*/

margin: 10px;
/\* все стороны: отступ 10px \*/

margin: 1.6em 20px;
/\* верх и низ: отступ 1.6em \*/
/\* право и лево: отступ 20px \*/

margin: 10px 3% 1em;
/\* верх: отступ 10px \*/
/\* право и лево: отступ 3% \*/
/\* низ: отступ 1em \*/

margin: 10px 3px 30px 5px;
/\* верх: отступ 10px \*/
/\* право: отступ 3px \*/
/\* низ: отступ 30px \*/
/\* лево: отступ 5px \*/

margin: 2em auto;
/\* верх и низ: отступ 2em \*/
/\* блок отцентрирован горизонтально \*/

margin: auto;
/\* верх и низ: отступ 0 \*/
/\* блок отцентрирован горизонтально \*/
```

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

### Горизонтальное выравнивание

Чтобы центрировать что-то горизонтально в современных браузерах, вы можете использовать `display: flex; justify-content: center;` .

Однако в старых браузерах, таких как IE8-9, которые не поддерживают технологию Flexible Box, они недоступны. Чтобы центрировать элемент внутри своего родителя, используйте `margin: 0 auto;` .

### Схлопывание отступов

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

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

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

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

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

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

* Введение в базовую блочную модель CSS
* Схлопывание отступов
* `margin-top`, `margin-right`, `margin-bottom` и `margin-left`
* Логические свойства: `margin-block-start` (en-US), `margin-block-end` (en-US), `margin-inline-start` и `margin-inline-end`. А так же сокращенные варианты: `margin-block` (en-US) и `margin-inline` (en-US)


Функция calc() - CSS: каскадные таблицы стилей

Функция calc()
==============

`calc()` - это функция CSS, которая даёт возможность рассчитать значения свойств CSS во время их определения. Она может быть использована везде, где применимы `<length>`, `<frequency>` (en-US), `<angle>`, `<time>`, `<number>`, или `<integer>`.

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

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

Функция `calc()` принимает в качестве параметра математическое выражение, результат вычисления которого можно использовать как значение CSS-свойства. Выражение может включать операторы +, -, \*, / с использованием стандартных правил приоритета операторов:

**+**

Сложение

**-**

Вычитание.

**\***

Умножение. По крайней мере хоть один из сомножителей должен быть `<number>`.

**/**

Деление. Делитель должен быть `<number>`.

Операнды в expression могут быть различными выражениями `<length>`. Если пожелаете, то можете использовать разные единицы измерения для каждого из операндов. Вы также можете использовать скобки, чтобы указать порядок вычисления.

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

**Примечание:** Операторы + и - всегда должны быть по обеим сторонам отделены пробелом. Выражение `calc(50% -8px)` будет интерпретировано как величина в процентах и следующее за ним отрицательное число в пикселях (не верное выражение), в то время как `calc(50% - 8px)` - правильное выражение, будет интерпретировано как вычитание из процентов длины в пикселях.
 Операторы \* и / не требуют отделения от операндов знаком пробела, но это не запрещено и даже приветствуется.

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

calc(expression)
```

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

### Позиционирование объекта в окне с помощью отступа

`calc()` делает простым позиционирование объекта с помощью отступа. В этом примере создаётся баннер занимающий в ширину все окно с отступами по краям в 40px.

```css
.banner {
  position: absolute;
  left: 5%; /\* для браузеров не поддерживающих calc() \*/
  left: calc(40px);
  width: 90%; /\* для браузеров не поддерживающих calc() \*/
  width: calc(100% - 80px);
  border: solid black 1px;
  box-shadow: 1px 2px;
  background-color: yellow;
  padding: 6px;
  text-align: center;
}
```

```html
<div class="banner">Это баннер!</div>
```

### Автоматическое изменение размера формы ввода для соответствия размеру контейнера

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

Давайте посмотрим некоторый код CSS:

```css
input {
  padding: 2px;
  display: block;
  width: 98%; /\* для браузеров, не поддерживающих calc() \*/
  width: calc(100% - 1em);
}

#formbox {
  width: 130px; /\* для браузеров, не поддерживающих calc() \*/
  width: calc(100% / 6);
  border: 1px solid black;
  padding: 4px;
}
```

Здесь ширина формы становится 1/6 от ширины окна. Затем, чтобы задать размер полей, мы вновь используем функцию `calc()`, которая вычитает 1em из ширины блока. Теперь применим этот CSS к следующему HTML-коду:

```html
<form>
  <div id="formbox">
    <label>Type something:</label>
    <input type="text" />
  </div>
</form>
```

### Вложенный `calc()` с CSS переменными

Вы также можете использовать `calc()` с CSS переменными. Рассмотрим пример кода:

```css
.foo {
  --widthA: 100px;
  --widthB: calc(var(--widthA) / 2);
  --widthC: calc(var(--widthB) / 2);
  width: var(--widthC);
}
```

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

| Specification |
| --- |
| CSS Values and Units Module Level 4 # calc-func |

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

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

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

* Firefox 4: CSS3 calc() ✩ Mozilla Hacks – the Web developer blog


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

background
==========

Сокращённое CSS свойство **`background`** устанавливает сразу все свойства стиля фона, такие как цвет, изображение, источник и размер, или метод повтора.

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

Исходный код этого интерактивного примера хранится в репозитории GitHub. Если вы хотите внести свой вклад в проект интерактивных примеров, пожалуйста клонируйте https://github.com/mdn/interactive-examples и отправьте нам запрос на извлечение..

Свойство является сокращением, которое устанавливает следующие свойства в одном объявлении: `background-clip`, `background-color`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`, и `background-attachment`.

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

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

```css
/\* Использование свойства <background-color> \*/
background: green;

/\* Использование свойств <bg-image> и <repeat-style> \*/
background: url("test.jpg") repeat-y;

/\* Использование <box> и <background-color> \*/
background: border-box red;

/\* Одно изображение, центрированное и масштабированное \*/
background: no-repeat center/80% url("../img/image.png");
```

**Примечание:** `background-color` можно определить только на последнем фоне, поскольку для всего элемента существует только один цвет фона.

### Значения

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

`<attachment>`

Смотри `background-attachment`

`<box>`

Смотри `background-clip`

`<background-color>`

Смотри `background-color`

`<bg-image>`

Смотри `background-image`

`<position>`

Смотри `background-position`

`<repeat-style>`

Смотри `background-repeat`

`<bg-size>`

Смотри `background-size`. Это свойство должно быть указано после **<position>**, разделённого символом '/'.

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

background =
  <bg-layer># (en-US)? (en-US) , <final-bg-layer>

<bg-layer> =
  <bg-image>                      || (en-US)
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)
  <repeat-style>                  || (en-US)
  <attachment>                    || (en-US)
  <visual-box>                    || (en-US)
  <visual-box>

<final-bg-layer> =
  <bg-image>                      || (en-US)
  <bg-position> [ (en-US) / <bg-size> ] (en-US)? (en-US)  || (en-US)
  <repeat-style>                  || (en-US)
  <attachment>                    || (en-US)
  <visual-box>                    || (en-US)
  <visual-box>                    || (en-US)
  <'background-color'>

<bg-image> =
  <image>  | (en-US)
  none

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

<bg-size> =
  [ (en-US) <length-percentage [0,∞]> | (en-US) auto ] (en-US){1,2} (en-US)  | (en-US)
  cover                                      | (en-US)
  contain

<repeat-style> =
  repeat-x                                     | (en-US)
  repeat-y                                     | (en-US)
  [ (en-US) repeat | (en-US) space | (en-US) round | (en-US) no-repeat ] (en-US){1,2} (en-US)

<attachment> =
  scroll  | (en-US)
  fixed   | (en-US)
  local

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

<image> =
  <url>       | (en-US)
  <gradient> (en-US)

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

<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) )

```

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

### HTML

```html
<p class="topbanner">
  Starry sky<br />
  Twinkle twinkle<br />
  Starry sky
</p>
<p class="warning">Here is a paragraph</p>
<p></p>
```

### CSS

```css
.warning {
  background: red;
}

.topbanner {
  background: url("starsolid.gif") #00d repeat-y fixed;
}
```

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

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

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

{cssinfo}}

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

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

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

* `-moz-background-inline-policy` (en-US)
* Использование градиентов (en-US)
* Несколько backgrounds (en-US)


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

CSS Ruby Layout
===============

CSS Ruby Layout - это модуль CSS, который предоставляет модель рендеринга и элементы управления форматированием, связанные с отображением аннотации ruby. Рубиновая аннотация - это форма межлинейной аннотации, состоящая из коротких строк текста наряду с базовым текстом. Они обычно используются в восточноазиатских документах для обозначения произношения или для краткой аннотации.

Reference
---------

### CSS properties

* `ruby-align`
* `ruby-position` (en-US)
Guides
------

*None.*

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1  |


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

clip-path
=========

CSS-свойство `clip-path` создаёт ограниченную область, которая определяет какая часть элемента должна быть видимой. Части, которые находятся внутри области, видимы, а части вне области скрыты.

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

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

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

/\* Значения <clip-source> \*/
clip-path: url(resources.svg#c1);

/\* Значения <geometry-box> \*/
clip-path: margin-box;
clip-path: border-box;
clip-path: padding-box;
clip-path: content-box;
clip-path: fill-box;
clip-path: stroke-box;
clip-path: view-box;

/\* Значения <basic-shape> \*/
clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: ellipse(50px 60px at 0 10% 20%);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path(
  "M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"
);

/\* Комбинация значений границ и формы блока \*/
clip-path: padding-box circle(50px at 0 100px);

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

Свойство `clip-path` определяется как значение или комбинация значений перечисленных ниже.

### Значения

`<clip-source>`

`url()` (en-US) указывающий на SVG-элемент `<clipPath>` (en-US) .

`<basic-shape>` (en-US)

Форма, размер и расположение которой определяется значением `<geometry-box>`. Если геометрия не указана, то в качестве блока будет использоваться `border-box`. Может определяться одной из следующих функций:

`inset()` (en-US)

Определяет внутренний прямоугольник.

`circle()` (en-US)

Определяет окружность, используя радиус и расположение.

`ellipse()` (en-US)

Определяет эллипс, используя два радиуса и расположение.

`polygon()` (en-US)

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

`path()` (en-US)

Определяет фигуру, используя объявление SVG фигуры и правило заполнения.

`<geometry-box>`

При использовании в сочетании с `<basic-shape>` это значение определяет блок для базовой области. При самостоятельном использовании определяет границы указанного блока, включая формирование углов (например, `border-radius`). Геометрия может быть определена с помощью одного из следующих значений:

`margin-box`

Использует margin box (en-US) для определения блока.

`border-box`

Использует border box (en-US) для определения блока.

`padding-box`

Использует padding box (en-US) для определения блока.

`content-box`

Использует content box (en-US) для определения блока.

`fill-box`

Использует область заливки объекта для определения блока.

`stroke-box`

Использует границы объекта для определения блока.

`view-box`

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

`none`

Область не создается.

**Примечание:** Значение, отличное от `none`, приводит к созданию нового контекста наложения так же, как при использовании значений CSS-свойства `opacity`, отличных от `1`.

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

|  |  |
| --- | --- |
| Начальное значение | `none` |
| Применяется к | все элементы; в SVG, это применяется к контейнерам, исключая элемент `defs` и все графические элементы |
| Наследуется | нет |
| Проценты | refer to reference box when specified, otherwise border-box |
| Обработка значения | как указано, но с абсолютными значениями `url` (en-US) |
| Animation type | да, как указано для `basic-shape` (en-US), иначе нет |

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

clip-path =
  <clip-source>                        | (en-US)
  [ (en-US) <basic-shape> (en-US) || (en-US) <geometry-box> ] (en-US)  | (en-US)
  none

<clip-source> =
  <url>

<geometry-box> =
  <shape-box>  | (en-US)
  fill-box     | (en-US)
  stroke-box   | (en-US)
  view-box

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

<shape-box> =
  <visual-box>  | (en-US)
  margin-box

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

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

<visual-box> =
  content-box  | (en-US)
  padding-box  | (en-US)
  border-box

```

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

### Сравнение HTML и SVG
```

<svg class="defs">
  <defs>
    <clipPath id="myPath" clipPathUnits="objectBoundingBox">
      <path
 d="M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z" />
    </clipPath>
  </defs>
</svg>

<div class="grid">
  <div class="col">
    <div class="note">clip-path: none</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="none">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="none">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: url(#myPath)<br /><br />
      Для этого примера определим такой вспомогательный элемент:
      <pre>
<svg>
  <clipPath id="myPath" clipPathUnits="objectBoundingBox">
    <path d="M0.5,1
      C 0.5,1,0,0.7,0,0.3
      A 0.25,0.25,1,1,1,0.5,0.3
      A 0.25,0.25,1,1,1,1,0.3
      C 1,0.7,0.5,1,0.5,1 Z" />
  </clipPath>
</svg></pre
 >
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="svg">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">
      clip-path: path('M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45
      Q135,90,75,130 Q15,90,15,45 Z')
    </div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="svg2">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="svg2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape1">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape1">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape2">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape2">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: fill-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape3">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape3">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: stroke-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape4">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape4">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: view-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape5">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape5">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: margin-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape6">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape6">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: border-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape7">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape7">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: padding-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape8">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape8">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>

    <div class="note">clip-path: content-box circle(25% at 25% 25%)</div>
    <div class="row">
      <div class="cell">
        <span>HTML</span>
        <div class="container">
          <p class="shape9">Я люблю<br /><em>разные формы</em></p>
        </div>
      </div>
      <div class="cell">
        <span>SVG</span>
        <div class="container view-box">
          <svg viewBox="0 0 192 192">
            <g class="shape9">
              <rect x="24" y="24" width="144" height="144" />
              <text x="96" y="91">Я люблю</text>
              <text x="96" y="109" class="em">разные формы</text>
            </g>
          </svg>
        </div>
      </div>
    </div>
  </div>
</div>
```

```css
html,
body {
  height: 100%;
  box-sizing: border-box;
  background: #eee;
}

.grid {
  width: 100%;
  height: 100%;
  display: flex;
  font: 1em monospace;
}

.row {
  display: flex;
  flex: 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 auto;
}

.cell {
  margin: 0.5em;
  padding: 0.5em;
  background-color: #fff;
  overflow: hidden;
  text-align: center;
  flex: 1;
}

.note {
  background: #fff3d4;
  padding: 1em;
  margin: 0.5em 0.5em 0;
  font: 0.8em sans-serif;
  text-align: left;
  white-space: nowrap;
}

.note + .row .cell {
  margin-top: 0;
}

.container {
  display: inline-block;
  border: 1px dotted grey;
  position: relative;
}

.container::before {
  content: "margin";
  position: absolute;
  top: 2px;
  left: 2px;
  font: italic 0.6em sans-serif;
}

.view-box {
  box-shadow:
    1rem 1rem 0 #efefef inset,
    -1rem -1rem 0 #efefef inset;
}

.container.view-box::after {
  content: "view-box";
  position: absolute;
  left: 1.1rem;
  top: 1.1rem;
  font: italic 0.6em sans-serif;
}

.cell span {
  display: block;
  margin-bottom: 0.5em;
}

p {
  font-family: sans-serif;
  background: #000;
  color: pink;
  margin: 2em;
  padding: 3em 1em;
  border: 1em solid pink;
  width: 6em;
}

.none {
  clip-path: none;
}
.svg {
  clip-path: url(#myPath);
}
.svg2 {
  clip-path: path(
    "M15,45 A30,30,0,0,1,75,45 A30,30,0,0,1,135,45 Q135,90,75,130 Q15,90,15,45 Z"
  );
}
.shape1 {
  clip-path: circle(25%);
}
.shape2 {
  clip-path: circle(25% at 25% 25%);
}
.shape3 {
  clip-path: fill-box circle(25% at 25% 25%);
}
.shape4 {
  clip-path: stroke-box circle(25% at 25% 25%);
}
.shape5 {
  clip-path: view-box circle(25% at 25% 25%);
}
.shape6 {
  clip-path: margin-box circle(25% at 25% 25%);
}
.shape7 {
  clip-path: border-box circle(25% at 25% 25%);
}
.shape8 {
  clip-path: padding-box circle(25% at 25% 25%);
}
.shape9 {
  clip-path: content-box circle(25% at 25% 25%);
}

.defs {
  width: 0;
  height: 0;
  margin: 0;
}

pre {
  margin-bottom: 0;
}

svg {
  margin: 1em;
  font-family: sans-serif;
  width: 192px;
  height: 192px;
}

svg rect {
  stroke: pink;
  stroke-width: 16px;
}

svg text {
  fill: pink;
  text-anchor: middle;
}

svg text.em {
  font-style: italic;
}
```

### Полный пример

#### HTML

```html
<img id="clipped" src="mdn.svg" alt="MDN logo" />
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90" />
      <rect x="0" y="110" width="90" height="90" />
      <rect x="137" y="0" width="90" height="90" />
      <rect x="0" y="0" width="90" height="90" />
    </clipPath>
  </defs>
</svg>

<select id="clipPath">
  <option value="none">none</option>
  <option value="circle(100px at 110px 100px)">circle</option>
  <option value="url(#cross)" selected>cross</option>
  <option value="inset(20px round 20px)">inset</option>
  <option value="path('M 0 200 L 0,110 A 110,90 0,0,1 240,100 L 200 340 z')">
    path
  </option>
</select>
```

#### CSS

```css
#clipped {
  margin-bottom: 20px;
  clip-path: url(#cross);
}
```

```
const clipPathSelect = document.getElementById("clipPath");
clipPathSelect.addEventListener("change", (evt) => {
  document.getElementById("clipped").style.clipPath = evt.target.value;
});
```

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

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

| Specification |
| --- |
| CSS Masking Module Level 1 # the-clip-path |
| CSS Shapes Module Level 1 # supported-basic-shapes |

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

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

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

* Shapes in clipping and masking – and how to use them
* Применение эффектов SVG к содержимому HTML
* CSS-свойства:
    + `mask` (en-US)
    + `filter`
* Атрибуты SVG:
    + `clip-path (en-US)`
    + `clip-rule (en-US)`