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

mix-blend-mode
==============

CSS-свойство **`mix-blend-mode`** определяет режим смешивания цветов выбранного элемента с низлежащими слоями.

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

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

```css
/\* Ключевые слова \*/
mix-blend-mode: normal;
mix-blend-mode: multiply;
mix-blend-mode: screen;
mix-blend-mode: overlay;
mix-blend-mode: darken;
mix-blend-mode: lighten;
mix-blend-mode: color-dodge;
mix-blend-mode: color-burn;
mix-blend-mode: hard-light;
mix-blend-mode: soft-light;
mix-blend-mode: difference;
mix-blend-mode: exclusion;
mix-blend-mode: hue;
mix-blend-mode: saturation;
mix-blend-mode: color;
mix-blend-mode: luminosity;

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

### Значения

`<blend-mode>` (en-US)

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

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

mix-blend-mode =
  <blend-mode>  | (en-US)
  plus-darker   | (en-US)
  plus-lighter

<blend-mode> =
  normal       | (en-US)
  multiply     | (en-US)
  screen       | (en-US)
  overlay      | (en-US)
  darken       | (en-US)
  lighten      | (en-US)
  color-dodge  | (en-US)
  color-burn   | (en-US)
  hard-light   | (en-US)
  soft-light   | (en-US)
  difference   | (en-US)
  exclusion    | (en-US)
  hue          | (en-US)
  saturation   | (en-US)
  color        | (en-US)
  luminosity

```

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

### Влияние различных значений режима смешивания
```

<div class="grid">
  <div class="col">
    <div class="note">
      Blending in isolation (no blending with the background)
    </div>
    <div class="row isolate">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <defs>
                <linearGradient id="red">
                  <stop offset="0" stop-color="hsl(0,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(0,0%,100%)" />
                </linearGradient>
                <linearGradient id="green">
                  <stop offset="0" stop-color="hsl(120,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(120,0%,100%)" />
                </linearGradient>
                <linearGradient id="blue">
                  <stop offset="0" stop-color="hsl(240,100%,50%)" />
                  <stop offset="100%" stop-color="hsl(240,0%,100%)" />
                </linearGradient>
              </defs>
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>

    <div class="note">Blending globally (blend with the background)</div>
    <div class="row">
      <div class="cell">
        normal
        <div class="container normal">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        multiply
        <div class="container multiply">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        darken
        <div class="container darken">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        screen
        <div class="container screen">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        lighten
        <div class="container lighten">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        overlay
        <div class="container overlay">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-dodge
        <div class="container color-dodge">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color-burn
        <div class="container color-burn">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hard-light
        <div class="container hard-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        soft-light
        <div class="container soft-light">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        difference
        <div class="container difference">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        exclusion
        <div class="container exclusion">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        hue
        <div class="container hue">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        saturation
        <div class="container saturation">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        color
        <div class="container color">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
      <div class="cell">
        luminosity
        <div class="container luminosity">
          <div class="group">
            <div class="item firefox"></div>
            <svg viewBox="0 0 150 150">
              <ellipse class="item R" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item G" cx="75" cy="75" rx="25" ry="70"></ellipse>
              <ellipse class="item B" cx="75" cy="75" rx="25" ry="70"></ellipse>
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

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

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

.col {
  display: flex;
  flex: 1 auto;
  flex-direction: column;
  height: auto;
}

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

.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 {
  position: relative;
  background: linear-gradient(to right, #000 0%, transparent 50%, #fff 100%),
    linear-gradient(to bottom, #ff0 0%, #f0f 50%, #0ff 100%);
  width: 150px;
  height: 150px;
  margin: 0 auto;
}

.R {
  transform-origin: center;
  transform: rotate(-30deg);
  fill: url(#red);
}

.G {
  transform-origin: center;
  transform: rotate(90deg);
  fill: url(#green);
}

.B {
  transform-origin: center;
  transform: rotate(210deg);
  fill: url(#blue);
}

.isolate .group {
  isolation: isolate;
}

.normal .item {
  mix-blend-mode: normal;
}
.multiply .item {
  mix-blend-mode: multiply;
}
.screen .item {
  mix-blend-mode: screen;
}
.overlay .item {
  mix-blend-mode: overlay;
}
.darken .item {
  mix-blend-mode: darken;
}
.lighten .item {
  mix-blend-mode: lighten;
}
.color-dodge .item {
  mix-blend-mode: color-dodge;
}
.color-burn .item {
  mix-blend-mode: color-burn;
}
.hard-light .item {
  mix-blend-mode: hard-light;
}
.soft-light .item {
  mix-blend-mode: soft-light;
}
.difference .item {
  mix-blend-mode: difference;
}
.exclusion .item {
  mix-blend-mode: exclusion;
}
.hue .item {
  mix-blend-mode: hue;
}
.saturation .item {
  mix-blend-mode: saturation;
}
.color .item {
  mix-blend-mode: color;
}
.luminosity .item {
  mix-blend-mode: luminosity;
}
```

### Пример HTML

```html
<div class="isolate">
  <div class="circle circle-1"></div>
  <div class="circle circle-2"></div>
  <div class="circle circle-3"></div>
</div>
```

```css
.circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  mix-blend-mode: screen;
  position: absolute;
}

.circle-1 {
  background: red;
}

.circle-2 {
  background: lightgreen;
  left: 40px;
}

.circle-3 {
  background: blue;
  left: 20px;
  top: 40px;
}

.isolate {
  isolation: isolate; /\* Без isolation, цвет фона будет учитываться \*/
  position: relative;
}
```

### Пример SVG

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

```html
<svg>
  <g class="isolate">
    <circle cx="40" cy="40" r="40" fill="red" />
    <circle cx="80" cy="40" r="40" fill="lightgreen" />
    <circle cx="60" cy="80" r="40" fill="blue" />
  </g>
</svg>
```

```css
circle {
  mix-blend-mode: screen;
}
.isolate {
  isolation: isolate;
} /\* Без isolation, цвет фона будет учитываться \*/
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # mix-blend-mode |

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

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

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

* `<blend-mode>` (en-US)
* `background-blend-mode`


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

Селекторы атрибутов
===================

Обзор
-----

Селекторы атрибутов отбирают элементы по наличию атрибута или его значению.

`[attr]`

Обозначает элемент с атрибутом по имени attr.

`[attr=value]`

Обозначает элемент с именем атрибута attr и значением в точности совпадающим с value.

`[attr~=value]`

Обозначает элемент с именем атрибута attr значением которого является набор слов разделённых пробелами, одно из которых в точности равно value

`[attr|=value]`

Обозначает элемент с именем атрибута attr. Его значение при этом может быть или в точности равно "value" или может начинаться с "value" со сразу же следующим "-" (U+002D). Это может быть использовано когда язык описывается с подходом.

`[attr^=value]`

Обозначает элемент с именем атрибута attr значение которого начинается с "value"

`[attr$=value]`

Обозначает элемент с именем атрибута attr чьё значение заканчивается на "value"

`[attr*=value]`

Обозначает элемент с именем атрибута attr чьё значение содержит по крайней мере одно вхождение строки "value" как подстроки.

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

```css
/\* Все span с атрибутом "lang" будут жирными \*/
span[lang] {
  font-weight: bold;
}

/\* Все span в Португалии будут зелёными \*/
span[lang="pt"] {
  color: green;
}

/\* Все span с американским английским будут синими \*/
span[lang~="en-us"] {
  color: blue;
}

/\* Любые span на китайском языке будут красными, как на упрощённом китайском (zh-CN) так и на традиционном (zh-TW) \*/
span[lang|="zh"] {
  color: red;
}

/\* Все внутренние ссылки будут иметь золотой фон \*/
a[href^="#"] {
  background-color: gold;
}

/\* Все ссылки с url заканчивающимся на .cn будут красными \*/
a[href$=".cn"] {
  color: red;
}

/\* Все ссылки содержащие "example" в url будут иметь серый фон \*/
a[href\*="example"] {
  background-color: #cccccc;
}
```

```html
<div class="hello-example">
  <a href="http://example.com">English:</a>
  <span lang="en-us en-gb en-au en-nz">Hello World!</span>
</div>
<div class="hello-example">
  <a href="#portuguese">Portuguese:</a>
  <span lang="pt">Olá Mundo!</span>
</div>
<div class="hello-example">
  <a href="http://example.cn">Chinese (Simplified):</a>
  <span lang="zh-CN">世界您好！</span>
</div>
<div class="hello-example">
  <a href="http://example.cn">Chinese (Traditional):</a>
  <span lang="zh-TW">世界您好！</span>
</div>
```

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

| Specification |
| --- |
| Selectors Level 4 # attribute-selectors |

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

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

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

* CSS селекторы: базовая поддержка браузерами
* Совместимость с браузерами селекторов и псевдо-селекторов CSS


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

overflow-block
==============

CSS свойство **`overflow-block`** устанавливает, что будет отображаться, когда содержимое переполняет начальные и конечные края блока. Это может быть ничего, полоса прокрутки или содержимое переполнения.

**Примечание:** Свойство `overflow-block` отображается на `overflow-y` (en-US) или `overflow-x` (en-US) в зависимости от режима записи документа.

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

```css
/\* Значения свойства \*/
overflow-block: visible;
overflow-block: hidden;
overflow-block: scroll;
overflow-block: auto;

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

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

### Значения

`visible`

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

`hidden`

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

`scroll`

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

`auto`

Зависит от пользовательского агента. Если содержимое помещается в поле дополнения, оно выглядит так же, как visible, но всё же устанавливает новый контекст форматирования блока. Настольные браузеры устанавливают полосы прокрутки, если содержимое переполняется.

### Формат синтаксиса
```

overflow-block =
  visible  | (en-US)
  hidden   | (en-US)
  clip     | (en-US)
  scroll   | (en-US)
  auto

```

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

### HTML

```html
<ul>
  <li>
    <code>overflow-block:hidden</code> — скрывает текст за пределами поля
    <div id="div1">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:scroll</code> — всегда добавляет полосу прокрутки
    <div id="div2">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:visible</code> — отображает текст вне поля, если это
    необходимо
    <div id="div3">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>

  <li>
    <code>overflow-block:auto</code> — в большинстве браузеров, что эквивалентно
    <code>scroll</code>
    <div id="div4">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
      commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
      velit esse cillum dolore eu fugiat nulla pariatur.
    </div>
  </li>
</ul>
```

### CSS

```css
#div1,
#div2,
#div3,
#div4 {
  border: 1px solid black;
  width: 250px;
  height: 100px;
}

#div1 {
  overflow-block: hidden;
  margin-bottom: 12px;
}
#div2 {
  overflow-block: scroll;
  margin-bottom: 12px;
}
#div3 {
  overflow-block: visible;
  margin-bottom: 120px;
}
#div4 {
  overflow-block: auto;
  margin-bottom: 120px;
}
```

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

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

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

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

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

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

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

* Связанные свойства CSS: `text-overflow` (en-US), `white-space`, `overflow`, `overflow-inline` (en-US), `overflow-x` (en-US), `overflow-y` (en-US), `clip` (en-US), `display`
* Логические свойства CSS (en-US)
* Режимы письма


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

align-self
==========

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

Свойство CSS **`align-self`** выравнивает flex-элементы по текущей flex-линии, переопределяя значение свойства `align-items`. Если у какого-либо flex-элемента **margin** в поперечной оси выставлен в `auto`, то `align-self` игнорируется.

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | flex items, grid items, and absolutely-positioned boxes |
| Наследуется | нет |
| Обработка значения | при `auto` абсолютно позиционированные элементы вычисляют сами и вычисленное значение `align-items` для родителя (кроме ключевых слов) на остальных блоках, или `start`, если у блока нет родителя. Его поведение зависит от модели макета, описываемой `justify-self` (en-US). Иначе указанное значение. |
| Animation type | discrete |

Данное свойство не применяется к block-level boxes и к ячейкам таблицы

Подробнее и больше информации читайте в Using CSS flexible boxes.

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

```css
/\* Keyword values \*/
align-self: auto;
align-self: normal;

/\* Positional alignment \*/
/\* align-self does not take left and right values \*/
align-self: center; /\* Put the item around the center \*/
align-self: start; /\* Put the item at the start \*/
align-self: end; /\* Put the item at the end \*/
align-self: self-start; /\* Align the item flush at the start \*/
align-self: self-end; /\* Align the item flush at the end \*/
align-self: flex-start; /\* Put the flex item at the start \*/
align-self: flex-end; /\* Put the flex item at the end \*/

/\* Baseline alignment \*/
align-self: baseline;
align-self: first baseline;
align-self: last baseline;
align-self: stretch; /\* Stretch 'auto'-sized items to fit the container \*/

/\* Overflow alignment \*/
align-self: safe center;
align-self: unsafe center;

/\* Global values \*/
align-self: inherit;
align-self: initial;
align-self: unset;
```

### Значения

`auto`

Computes to the parent's `align-items` value.

`normal`

The effect of this keyword is dependent of the layout mode we are in:

* In absolutely-positioned layouts, the keyword behaves like `start` on *replaced* absolutely-positioned boxes, and as `stretch` on *all other* absolutely-positioned boxes.
* In static position of absolutely-positioned layouts, the keyword behaves as `stretch`.
* For flex items, the keyword behaves as `stretch`.
* For grid items, this keyword leads to a behavior similar to the one of `stretch`, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like `start`.
* The property doesn't apply to block-level boxes, and to table cells.

`self-start`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's start side in the cross axis.

`self-end`

Aligns the items to be flush with the edge of the alignment container corresponding to the item's end side in the cross axis.

`flex-start`

The cross-start margin edge of the flex item is flushed with the cross-start edge of the line.

`flex-end`

The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

`center`

The flex item's margin box is centered within the line on the cross-axis. If the cross-size of the item is larger than the flex container, it will overflow equally in both directions.

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`stretch`

If the combined size of the items along the cross axis is less than the size of the alignment container and the item is `auto`-sized, its size is increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size of all `auto`-sized items exactly fills the alignment container along the cross axis.

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

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

align-self =
  auto                                  | (en-US)
  normal                                | (en-US)
  stretch                               | (en-US)
  <baseline-position>                   | (en-US)
  <overflow-position>? (en-US) <self-position>  | (en-US)
  anchor-center

<baseline-position> =
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)
  baseline

<overflow-position> =
  unsafe  | (en-US)
  safe

<self-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  self-start  | (en-US)
  self-end    | (en-US)
  flex-start  | (en-US)
  flex-end

```

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-self-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

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

* CSS Flexbox Guide: *Basic Concepts of Flexbox*
* CSS Flexbox Guide: *Aligning items in a flex container*
* CSS Grid Guide: *Box alignment in CSS Grid layouts*
* CSS Box Alignment
* The `align-items` property


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

background-origin
=================

CSS свойство **`background-origin`** устанавливает *область расположения фона*. Другими словами, оно устанавливает исходную позицию изображения, установленную с помощью свойства `background-image`.

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

Обратите внимание, что `background-origin` игнорируется, когда `background-attachment` является `fixed`.

**Примечание:** Сокращение `background` сбрасывает значения этого свойства к его начальному значению, если оно не указано.

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

```css
/\* Ключевые слова \*/
background-origin: border-box;
background-origin: padding-box;
background-origin: content-box;

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

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

### Значения

`border-box`

Фон располагается относительно рамки.

`padding-box`

Фон расположен относительно поля отступа.

`content-box`

Фон располагается относительно поля содержимого.

### Официальный синтаксис
```

background-origin =
  <visual-box># (en-US)

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

```

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

```css
.example {
  border: 10px double;
  padding: 10px;
  background: url("image.jpg");
  background-position: center left;
  background-origin: content-box;
}
```

```css
#example2 {
  border: 4px solid black;
  padding: 10px;
  background: url("image.gif");
  background-repeat: no-repeat;
  background-origin: border-box;
}
```

```css
div {
  background-image: url("logo.jpg"), url("mainback.png"); /\* Applies two images to the background \*/
  background-position:
    top right,
    0px 0px;
  background-origin: content-box, padding-box;
}
```

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

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

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

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

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

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

* `background-clip`


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

CSS Transforms
==============

**CSS Transforms** – модуль CSS, который определяет, как стилизованные с помощью CSS элементы, могут быть преобразованы в двухмерном или трёхмерном пространстве.

Справка
-------

### Свойства

* `backface-visibility`
* `perspective`
* `perspective-origin` (en-US)
* `rotate` (en-US)
* `scale` (en-US)
* `transform`
* `transform-box` (en-US)
* `transform-origin` (en-US)
* `transform-style`
* `translate` (en-US)
### Типы данных

* `<transform-function>` (en-US)
Руководства
-----------

Использование CSS-трансформаций (en-US)

Пошаговое руководство о том, как преобразовывать элементы с помощью CSS.

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

| Specification |
| --- |
| CSS Transforms Module Level 1  |
| CSS Transforms Module Level 2  |


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

isolation
=========

CSS-свойство **`isolation`** определяет должен ли элемент создавать новый контекст наложения stacking context (en-US).

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

Это свойство особенно полезно при использовании совместно с `background-blend-mode`.

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

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

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

Свойство `isolation` указывается в качестве значения одного из нижеследующих ключевых слов.

### Значения

`auto`

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

`isolate`

Новый контекст наложения должен быть создан.

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

isolation =
  <isolation-mode>

<isolation-mode> =
  auto     | (en-US)
  isolate

```

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

```html
<div id="b" class="a">
  <div id="d">
    <div class="a c">auto</div>
  </div>
  <div id="e">
    <div class="a c">isolate</div>
  </div>
</div>
```

```css
.a {
  background-color: rgb(0, 255, 0);
}
#b {
  width: 200px;
  height: 210px;
}
.c {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  padding: 2px;
  mix-blend-mode: difference;
}
#d {
  isolation: auto;
}
#e {
  isolation: isolate;
}
```

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

| Specification |
| --- |
| Compositing and Blending Level 2 # isolation |

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | Все элементы. В SVG это применяется к контейнерам, графическим элементам и элементам графической отсылки. |
| Наследуется | нет |
| Обработка значения | как указано |
| Animation type | Not animatable |

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

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

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

* `<blend-mode>` (en-US)
* `mix-blend-mode`, `background-blend-mode`


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

minmax()
========

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

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

* Learn more
* See full compatibility
* Report feedback
**`minmax()`** это CSS функция, определяющая диапазон размеров, который больше или равен *min* и меньше или равен *max*. Используется в CSS Grids.

```css
/\* <inflexible-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(400px, 50%)
minmax(30%, 300px)
minmax(100px, max-content)
minmax(min-content, 400px)
minmax(max-content, auto)
minmax(auto, 300px)
minmax(min-content, auto)

/\* <fixed-breadth>, <track-breadth> values \*/
minmax(200px, 1fr)
minmax(30%, 300px)
minmax(400px, 50%)
minmax(50%, min-content)
minmax(300px, max-content)
minmax(200px, auto)

/\* <inflexible-breadth>, <fixed-breadth> values \*/
minmax(400px, 50%)
minmax(30%, 300px)
minmax(min-content, 200px)
minmax(max-content, 200px)
minmax(auto, 300px)
```

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

Функция принимает два параметра, *min* и *max*.

Каждый параметр может быть значением `<length>`, либо `<percentage>`, либо `<flex>`, или одним из ключевых слов `max-content`, `min-content`, или `auto`.

Если *max* < *min*, то *max* игнорируется и `minmax(min,max)` обрабатывается как *min*. As a maximum, a `<flex>` value sets the flex factor of a grid track; it is invalid as a minimum.

### Значения

`<length>`

A non-negative length.

`<percentage>`

A non-negative percentage relative to the inline size of the grid container in column grid tracks, and the block size of the grid container in row grid tracks. If the size of the grid container depends on the size of its tracks, then the `<percentage>` must be treated as `auto`. The user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would result in honoring the percentage.

`<flex>`

A non-negative dimension with the unit `fr` specifying the track's flex factor. Each `<flex>`-sized track takes a share of the remaining space in proportion to its flex factor.

`max-content`

Represents the largest max-content contribution of the grid items occupying the grid track.

`min-content`

Represents the largest min-content contribution of the grid items occupying the grid track.

`auto`

As a maximum, identical to `max-content`. As a minimum it represents the largest minimum size (as specified by `min-width`/`min-height`) of the grid items occupying the grid track.

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

<minmax()> =
  minmax( min , max )

```

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

### CSS

```css
#container {
  display: grid;
  grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px;
  grid-gap: 5px;
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: #8cffa0;
  padding: 10px;
}

#container > div {
  background-color: #8ca0ff;
  padding: 5px;
}
```

### HTML

```html
<div id="container">
  <div>
    Item as wide as the content,<br />
    but at most 300 pixels.
  </div>
  <div>Item with flexible width but a minimum of 200 pixels.</div>
  <div>Inflexible item of 150 pixels width.</div>
</div>
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # valdef-grid-template-columns-minmax |

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

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

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

* Grid Layout Guide: *Basic concepts of grid layout - track sizing with minmax()*
* Video tutorial: *Introducing minmax()*


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

ruby-align
==========

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

Summary
-------

The **`ruby-align`** CSS property defines the distribution of the different ruby elements over the base.

|  |  |
| --- | --- |
| Начальное значение | `space-around` |
| Применяется к | базовые элементы ruby, аннотации к ruby, базовые ruby контейнеры, контейнеры аннотаций к ruby |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | by computed value type |

Syntax
------

```css
/\* Keyword values \*/
ruby-align: start;
ruby-align: center;
ruby-align: space-between;
ruby-align: space-around;

/\* Global values \*/
ruby-align: inherit;
ruby-align: initial;
ruby-align: unset;
```

### Values

`start`

Is a keyword indicating that the ruby will be aligned with the start of the base text.

`center`

Is a keyword indicating that the ruby will be aligned at the middle of the base text

`space-between`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby.

`space-around`

Is a keyword indicating that the extra space will be distributed between the elements of the ruby, and around it.

### Formal syntax
```

ruby-align =
  start          | (en-US)
  center         | (en-US)
  space-between  | (en-US)
  space-around

```

Examples
--------

This HTML will render differently with each value of `ruby-align`:

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

### Ruby aligned at the start of the base text

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: start;
}
```

This gives the following result:

### Ruby aligned at the center of the base text

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: center;
}
```

This gives the following result:

### Extra space distributed between ruby elements

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: space-between;
}
```

This gives the following result:

### Extra space distributed between and around ruby element

```html
<ruby>
  <rb>This is a long text to check</rb>
  <rp>（</rp><rt>short ruby</rt><rp>）</rp>
</ruby>
```

```css
ruby {
  ruby-align: space-around;
}
```

This gives the following result:

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

| Specification |
| --- |
| CSS Ruby Annotation Layout Module Level 1 # ruby-align-property |

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

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

See also
--------

* HTML Ruby elements: `<ruby>`, `<rt>` (en-US), `<rp>` (en-US), and `<rtc>` (en-US).
* CSS Ruby properties: `ruby-position` (en-US), `ruby-merge`.


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

<angle>
=======

Тип данных CSS **`<angle>`** представляет собой значение угла, выраженное в градусах, градах, радианах или оборотах. Он используется, например, в `<gradient>` (en-US) и в некоторых функциях `transform`.

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

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

Тип данных `<angle>` состоит из числа (`<number>`), за которым следует одна из единиц измерения, представленные ниже. Между литералом единицы измерения и цифрой нет пробела. После `0` указывать единицу измерения необязательно.

Опционально перед числом может стоять знак `+` или `-` . Положительное значение отмеряется по часовой стрелке, а отрицательные – против часовой. Чтобы достичь статистических свойств, каждый угол может быть представлен разными значениями, эквивалентными друг другу. Например, `90deg` равняется `-270deg`, а `1turn` равняется `4turn`. Тем не менее, для достижения динамических свойств эффект будет другим. Например, при применении `animation` или `transition`.

### Единицы измерения

deg

Представляет угол в градусах. Один полный круг равен `360deg`. Например: `0deg`, `90deg`, `14.23deg`.

grad

Представляет угол в градах. Один полный круг равен `400grad`. Например: `0grad`, `100grad`, `38.8grad`.

rad

Представляет угол в радианах. Один полный круг равен 2π или примерно `6.2832rad`. `1rad` - это 180/π градусов. Например: `0rad`, `1.0708rad`, `6.2832rad`.

turn

Представляет угол в количестве оборотов. Один полный круг равен `1turn`. Например: `0turn`, `0.25turn`, `1.2turn`.

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

|  | Прямой угол: `90deg = 100grad = 0.25turn ≈ 1.5708rad` |
| --- | --- |
|  | Развёрнутый угол: `180deg = 200grad = 0.5turn ≈ 3.1416rad` |
|  | Прямой угол (против часовой стрелки): `-90deg = -100grad = -0.25turn ≈ -1.5708rad` |
|  | Нулевой угол: `0deg = 0grad = 0turn = 0rad` |

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

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

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

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


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

scroll-snap-type
================

CSS свойство **`scroll-snap-type`** определяет как строго прокрутка контейнера привязывается к точкам привязки.

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

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

```css
/\* Ключевые слова \*/
scroll-snap-type: none;
scroll-snap-type: x;
scroll-snap-type: y;
scroll-snap-type: block;
scroll-snap-type: inline;
scroll-snap-type: both;

/\* Опционально mandatory | proximity\*/
scroll-snap-type: x mandatory;
scroll-snap-type: y proximity;
scroll-snap-type: both mandatory;

/\* и т.д. \*/

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

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

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

### Значения

`none`

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

`x`

Прокрутка контейнера привязывается только по горизонтальной оси.

`y`

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

`block`

Прокрутка контейнера привязывается только по блоковой оси.

`inline`

Прокрутка контейнера привязывается только по строчной оси.

`both`

Прокрутка контейнера независимо привязывается только по обоим осям (потенциально может привязываться к разным элементам на разных осях).

`mandatory`

Визуальный viewport контейнера остаётся на точке привязки, если он в данный момент не прокручивается. То есть он привязывается к точке, когда прокручивание завершилось. Если контент добавлен, перемещён, удалён или если изменён его размер, прокрутка будет отрегулирована так, чтобы оставаться на этой же точке.

`proximity`

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

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

scroll-snap-type =
  none                                                | (en-US)
  [ (en-US) x | (en-US) y | (en-US) block | (en-US) inline | (en-US) both ] (en-US) [ (en-US) mandatory | (en-US) proximity ] (en-US)? (en-US)

```

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

### HTML

```html
<div class="holster">
  <div class="container x mandatory-scroll-snapping" dir="ltr">
    <div>X Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x proximity-scroll-snapping" dir="ltr">
    <div>X Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y mandatory-scroll-snapping" dir="ltr">
    <div>Y Mand. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y proximity-scroll-snapping" dir="ltr">
    <div>Y Prox. LTR</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x mandatory-scroll-snapping" dir="rtl">
    <div>X Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container x proximity-scroll-snapping" dir="rtl">
    <div>X Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y mandatory-scroll-snapping" dir="rtl">
    <div>Y Mand. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>

  <div class="container y proximity-scroll-snapping" dir="rtl">
    <div>Y Prox. RTL</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
  </div>
</div>
```

### CSS

```css
/\* setup \*/
html,
body,
.holster {
  height: 100%;
}
.holster {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-flow: column nowrap;
  font-family: monospace;
}

.container {
  display: flex;
  overflow: auto;
  outline: 1px dashed lightgray;
  flex: none;
}

.container.x {
  width: 100%;
  height: 128px;
  flex-flow: row nowrap;
}

.container.y {
  width: 256px;
  height: 256px;
  flex-flow: column nowrap;
}
/\* scroll-snap \*/
.x.mandatory-scroll-snapping {
  scroll-snap-type: x mandatory;
}

.y.mandatory-scroll-snapping {
  scroll-snap-type: y mandatory;
}

.x.proximity-scroll-snapping {
  scroll-snap-type: x proximity;
}

.y.proximity-scroll-snapping {
  scroll-snap-type: y proximity;
}

.container > div {
  text-align: center;
  scroll-snap-align: center;
  flex: none;
}

.x.container > div {
  line-height: 128px;
  font-size: 64px;
  width: 100%;
  height: 128px;
}

.y.container > div {
  line-height: 256px;
  font-size: 128px;
  width: 256px;
  height: 100%;
}
/\* appearance fixes \*/
.y.container > div:first-child {
  line-height: 1.3;
  font-size: 64px;
}
/\* coloration \*/
.container > div:nth-child(even) {
  background-color: #87ea87;
}

.container > div:nth-child(odd) {
  background-color: #87ccea;
}
```

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

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

| Specification |
| --- |
| CSS Scroll Snap Module Level 1 # scroll-snap-type |

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

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


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

clamp()
=======

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

`clamp(MIN, VAL, MAX)` вычисляется как ``max` (en-US)(MIN, `min` (en-US)(VAL, MAX))`

```css
/\* свойство: clamp(expression{3}) \*/
width: clamp(10px, 4em, 80px);
```

В примере выше ширина будет не меньше 10px и не больше 80px. Но если размер одного "em" будет находиться в диапазоне от 2.5px до 20px (в сумме от 10px до 80px), то ширина будет равняться этим 4em.

Давайте предположим, что в примере выше 1em равен 16px:

```css
width: clamp(10px, 4em, 80px);
/\* если 1em = 16px, 4em = (16px \* 4) = 64px \*/
width: clamp(10px, 64px, 80px);
/\* clamp(MIN, VAL, MAX) вычисляется как max(MIN, min(VAL, MAX))) \*/
width: max(10px, min(64px, 80px))
width: max(10px, 64px);
width: 64px;
```

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

Функция `clamp()` принимает в качестве аргументов три разделённых запятой выражения, указываемых в порядке: минимальное значение, предпочитаемое значение, максимальное значение.

*Минимальное значение* – наименьшее значение, являющееся нижней границей диапазона допустимых значений. Если "предпочитаемое" значение меньше "минимального", будет использоваться именно "минимальное".

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

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

Передаваемые значения могут быть математическими функциями (более подробно смотрите на `calc()`), точными значениями, или другими выражениями, такими как `attr()`, результатом которых является допустимый тип аргумента (как например `<length>`), или вложенные `min()` (en-US) и `max()` (en-US) функции. Для математических выражений можно использовать сложение, вычитание, умножение и деление без использования функции `calc()`. Также, можно использовать круглые скобки, чтобы задать порядок вычисление.

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

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

* Математические выражения, включающие в себя проценты для ширины и высоты колонок таблицы, групп колонок таблицы, строк таблицы, групп строк таблицы и ячеек таблицы и при значении "auto" и при значении "fixed" свойства "table-layout" могут обрабатываться как если бы было задано значение `auto`.
* Допускается вкладывать функции `max()` и `min()` в качестве значений выражений, в этом случае внутренние обрабатываются как простые скобки. Выражения являются полностью математическими выражениями, поэтому вы можете использовать сложения, вычитание, умножение и деление без использования самой функции calc().
* Выражение может быть значениями, объединяющими операторы сложения (+), вычитания (-), умножения (\*) и деления (/) с использованием стандартных правил приоритета операторов. Не забудьте поставить пробелы с каждой стороны от операндов + и -. Операнды в выражении могут иметь любое значение синтаксиса `<length>`. Вы можете использовать разные единицы для каждого значения в своём выражении. Вы также можете использовать круглые скобки, чтобы установить порядок вычислений, когда это необходимо.
* Часто вам может понадобиться использовать `min()` (en-US) и `max()` (en-US) в функции clamp ().
### Formal syntax
```

<clamp()> =
  clamp( <calc-sum># (en-US){3} (en-US) )

<calc-sum> =
  <calc-product> [ (en-US) [ (en-US) '+' | (en-US) '-' ] (en-US) <calc-product> ] (en-US)\* (en-US)

<calc-product> =
  <calc-value> [ (en-US) [ (en-US) '*' | (en-US) '/' ] (en-US) <calc-value> ] (en-US)\* (en-US)

<calc-value> =
  <number>        | (en-US)
  <dimension> (en-US)     | (en-US)
  <percentage>    | (en-US)
  <calc-keyword>  | (en-US)
  ( <calc-sum> )

<calc-keyword> =
  e          | (en-US)
  pi         | (en-US)
  infinity   | (en-US)
  -infinity  | (en-US)
  NaN

```

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

### Установка минимального и максимального размера шрифта

`clamp()` позволяет вам установить размер шрифта, который изменяется в зависимости от ширины области видимости, но не уменьшается ниже и не увеличивается выше заданного размера. Она имеет тот же эффект, что и в Fluid Typography, но в одну строку и без использования медиавыражений.

```css
p {
  font-size: clamp(1rem, 2.5vw, 1.5rem);
}
```

```html
<p>
  If 2.5vw is less than 1rem, the font-size will be 1rem. If 2.5vw is greater
  than 1.5rem, the font-size will be 1.5rem. Otherwise, it will be 2.5vw.
</p>
```

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

TBD

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

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

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

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

See also
--------

* `calc()`
* `max()` (en-US)
* `min()` (en-US)
* CSS Values


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

grid-column
===========

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

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

* Learn more
* See full compatibility
* Report feedback
Сокращённое CSS-свойство **`grid-column`** задаёт размер и положение элемента, находящегося внутри грид-колонки, путём размещения его по грид-линии, расширяя его при необходимости, тем самым определяя начальную и конечную границу грид-области (en-US), в пределах которой он должен находиться.

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

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

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

* `grid-column-end` (en-US)
* `grid-column-start` (en-US)
Syntax
------

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

/\* Значения с <custom-ident> \*/
grid-column: somegridarea;
grid-column: somegridarea / someothergridarea;

/\* Значения с <integer> и <custom-ident> \*/
grid-column: somegridarea 4;
grid-column: 4 somegridarea / 6;

/\* Значения со span, <integer> и <custom-ident> \*/
grid-column: span 3;
grid-column: span somegridarea;
grid-column: 5 somegridarea span;
grid-column: span 3 / 6;
grid-column: span somegridarea / span someothergridarea;
grid-column: 5 somegridarea span / 2 span;

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

Это свойство может принимать одно или два значения `<grid-line>`.

Если указаны два значения `<grid-line>`, они разделяются символом "/". В этом случае до слеша указывается значение для `grid-column-start`, а после слеша — значение для `grid-column-end`.

Само значение `<grid-line>` может быть определено следующим образом:

* ключевым словом `auto`;
* значением `<custom-ident>`;
* значением `<integer>`;
* `<custom-ident>` и `<integer>`, разделённых пробелом;
* ключевым словом `span` вместе с `<custom-ident>` или `<integer>`.
### Значения

`auto`

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

`<custom-ident>`

Если существует грид-линия с именем в формате `<custom-ident>-start`/`<custom-ident>-end`, элемент будет расположен с начала этой линии.

**Примечание:** именованные грид-области автоматически создают имена линий в соответствии с показанным выше форматом, поэтому `grid-column: foo;` выберет начало/конец этой именованной грид-области (в случае если явно не указана другая линия с именами `foo-start`/`foo-end`).

Если такой грид-линии нет, то этот значение неявно преобразуется в `<custom-ident>` с числом `1`.

`<integer> && <custom-ident>?`

Размещает грид-элемент на грид-линии, заданной числом `<integer>`. Если указано отрицательное число, отсчёт начинается в обратном порядке, начиная с конца грид-раскладки.

Если в значении задано имя `<custom-ident>`, то будут учитываться линии только с этим именем. Если линий с таким именем не хватает, тогда для поиска нужной позиции будут учитываться неявные грид-линии. То есть эти линии будут учитываться так, как если бы у них было задано указанное имя.

Целое (`<integer>`) значение `0` считается некорректным.

`span && [ <integer> || <custom-ident> ]`

Размещает грид-элемент таким образом, что он будет расширен на указанное число ячеек.

Если в значении задано имя `<custom-ident>`, то будут учитываться линии только с этим именем. Если линий с таким именем не хватает, тогда для выбора нужного количества ячеек будут учитываться неявно заданные грид-линии. То есть эти линии будут учитываться так, как если бы у них было задано указанное имя.

Если число `<integer>` не было указано, по умолчанию будет `1`. Ноль и отрицательные числа считаются недопустимыми.

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

|  |  |
| --- | --- |
| Начальное значение | как и у каждого из подсвойств этого свойства:* `grid-column-start` (en-US): `auto`
* `grid-column-end` (en-US): `auto`
 |
| Применяется к | элементы сетки и абсолютно-позиционированные блоки, находящиеся в сеточном контейнере |
| Наследуется | нет |
| Обработка значения | как и у каждого из подсвойств этого свойства:* `grid-column-start` (en-US): как указано
* `grid-column-end` (en-US): как указано
 |
| Animation type | discrete |

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

grid-column =
  <grid-line> [ (en-US) / <grid-line> ] (en-US)? (en-US)

<grid-line> =
  auto                                                | (en-US)
  <custom-ident>                                      | (en-US)
  [ (en-US) [ (en-US) <integer [-∞,-1]> | (en-US) <integer [1,∞]> ] (en-US) && (en-US) <custom-ident>? (en-US) ] (en-US)  | (en-US)
  [ (en-US) span && (en-US) [ (en-US) <integer [1,∞]> || (en-US) <custom-ident> ] (en-US) ] (en-US)

```

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

### Грид-колонки с указанием размера и положением

#### HTML

```html
<div id="grid">
  <div id="item1"></div>
  <div id="item2"></div>
  <div id="item3"></div>
</div>
```

#### CSS

```css
#grid {
  display: grid;
  height: 100px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 100px;
}

#item1 {
  background-color: lime;
}

#item2 {
  background-color: yellow;
  grid-column: 2 / 4;
}

#item3 {
  background-color: blue;
  grid-column: span 2 / 7;
}
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # placement-shorthands |

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

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

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

* Связанные CSS-свойства: `grid-row` (en-US), `grid-row-start`, `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US)
* Руководство по грид-раскладке: *Line-based placement with CSS Grid*
* Обучающее видео: *Line-based placement*


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

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

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

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

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

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

Создаваемые области не связаны с конкретным грид-элементом, но их можно указать в свойствах `grid-row-start`, `grid-row-end` (en-US), `grid-column-start` (en-US), `grid-column-end` (en-US), или в их сокращённых вариантах: `grid-row` (en-US), `grid-column` и `grid-area`.

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

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

/\* Строка (<string>) в качестве значения \*/
grid-template-areas: "a b";
grid-template-areas:
  "a b b"
  "a c d";

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

### Значения

`none`

Грид-контейнер не определяет именованных грид-областей.

``<string>` (en-US)+`

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

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

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

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

grid-template-areas =
  none       | (en-US)
  <string> (en-US)+ (en-US)

```

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

### Создание именованных грид-областей

#### HTML

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

#### CSS

```css
#page {
  display: grid;
  width: 100%;
  height: 250px;
  grid-template-areas:
    "head head"
    "nav main"
    "nav foot";
  grid-template-rows: 50px 1fr 30px;
  grid-template-columns: 150px 1fr;
}

#page > header {
  grid-area: head;
  background-color: #8ca0ff;
}

#page > nav {
  grid-area: nav;
  background-color: #ffa08c;
}

#page > main {
  grid-area: main;
  background-color: #ffff64;
}

#page > footer {
  grid-area: foot;
  background-color: #8cffa0;
}
```

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

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

| Specification |
| --- |
| CSS Grid Layout Module Level 2 # grid-template-areas-property |

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

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

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

* Связанные CSS-свойства: `grid-template-rows`, `grid-template-columns`, `grid-template`
* Руководство по грид-раскладке: *Области грид-шаблона*
* Видеоурок: *Grid Template Areas*


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

<filter-function>
=================

Тип данных CSS **`<filter-function>`** представляет собой графический эффект, который может изменить внешний вид входного изображения. Он используется в свойствах `filter` и `backdrop-filter`.

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

Тип данных `<filter-function>` указывается с использованием одной из функций, указанных ниже. Каждая функция требует аргумент, который, если он неверен, не приводит к применению фильтра.

`blur()`

Применяет эффект размытия к изображению.

`brightness()` (en-US)

Делает изображение ярче или темнее.

`contrast()` (en-US)

Увеличивает или уменьшает контрастность изображения.

`drop-shadow()` (en-US)

Применяет к изображению тень.

`grayscale()` (en-US)

Преобразует изображение к тонам серого.

`hue-rotate()` (en-US)

Изменяет оттенок изображения за счёт поворота на цветовом круге.

`invert()`

Инвертирует цвета изображения.

`opacity()` (en-US)

Изменяет прозрачность изображения.

`saturate()` (en-US)

Изменяет насыщенность цветов изображения.

`sepia()` (en-US)

Преобразует изображение в сепию.

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

| Specification |
| --- |
| Filter Effects Module Level 1 # typedef-filter-function |

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

* Свойства, которые используют этот тип данных: `filter` и `backdrop-filter`


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

align-items
===========

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

CSS свойство **`align-items`** выравнивает flex-элементы текущей flex-линии таким же образом, как и `justify-content`, но в перпендикулярном направлении.

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

Подробнее и больше информации читайте в Использование гибких блоков CSS.

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

```css
/\* Align to cross-start \*/
align-items: flex-start;

/\* Align to cross-end \*/
align-items: flex-end;

/\* Центрировать элементы в поперечной оси \*/
align-items: center;

/\* Выровняйте базовые линии предметов \*/
align-items: baseline;

/\* Растянуть предметы, чтобы соответствовать \*/
align-items: stretch;

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

### Значения

`normal`

Эффект этого ключевого слова зависит от режима макета, в котором мы находимся:

* В абсолютно позиционированных макетах ключевое слово ведёт себя как `start` в *заменённых* абсолютно позиционированных блоках, и как `stretch` во *всех других* абсолютно позиционированных блоках.
* В статическом положении абсолютно позиционированных макетов ключевое слово ведёт себя как `stretch`.
* Для гибких элементов ключевое слово ведёт себя как `stretch`.
* Для элементов сетки это ключевое слово ведёт к поведению, аналогичному `stretch`, за исключением полей с соотношением сторон или внутренних размеров, где оно ведёт себя как `start`.
* Это свойство не применяется к блокам уровня блока и к ячейкам таблицы.

`flex-start`

Край поперечного начала края гибкого элемента выровнен с краем поперечного начала линии.

`flex-end`

The cross-end margin edge of the flex item is flushed with the cross-end edge of the line.

`center`

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

`baseline`

All flex items are aligned such that their baselines align. The item with the largest distance between its cross-start margin edge and its baseline is flushed with the cross-start edge of the line.

`stretch`

Элементы Flex растягиваются, например, поперечный размер поля элемента совпадает с линией при соблюдении ограничений ширины и высоты.

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

align-items =
  normal                                    | (en-US)
  stretch                                   | (en-US)
  <baseline-position>                       | (en-US)
  [ (en-US) <overflow-position>? (en-US) <self-position> ] (en-US)  | (en-US)
  anchor-center

<baseline-position> =
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)
  baseline

<overflow-position> =
  unsafe  | (en-US)
  safe

<self-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  self-start  | (en-US)
  self-end    | (en-US)
  flex-start  | (en-US)
  flex-end

```

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-items-property |
| CSS Flexible Box Layout Module Level 1 # align-items-property |

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

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

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

* Использование гибких блоков CSS (en-US)


Атрибут justify-items - CSS: каскадные таблицы стилей

Атрибут justify-items
=====================

Атрибут CSS **`justify-items`** определяет атрибут по умолчанию `justify-self` (en-US) для всех элементов блока, предоставляя всем им способ выравнивания по умолчанию каждого блока вдоль соответствующей оси.

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

Эффект этого атрибута зависит от выбранного способа разметки:

* Используя разметку с помощью блоков (block-level layout), элементы выравниваются внутри содержащего их блока по внутренней оси.
* Для абсолютно позиционированых элементов выравнивание происходит внутри содержащего их блока по внутренней оси, учитывая значения смещения сверху, слева, снизу и справа.
* Используя разметку с помощью ячеек таблицы (table cell layout), этот атрибут игнорируется (подробнее (en-US) о выравнивании в блочной структуре, абсолютном позиционировании и о табличной разметке).
* Используя разметку с помощью гибких или адаптивных блоков (flexbox layout), этот атрибут игнорируется (подробнее о выравнивании в разметке flexbox).
* Используя разметку с помощью сетки (grid layout), элементы выравниваются внутри их сеточной области по внутренней оси (подробнее (en-US) о выравнивании в разметке grid).
Синтаксис
---------

```css
/\* Ключевые слова \*/
justify-items: auto;
justify-items: normal;
justify-items: stretch;

/\* Выравнивание положения \*/
justify-items: center; /\* Выровнять элементы по центру \*/
justify-items: start; /\* Выровнять элементы в начале \*/
justify-items: end; /\* Выровнять элементы в конце \*/
justify-items: flex-start; /\* Эквивалентно 'start'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. \*/
justify-items: flex-end; /\* Эквивалентно 'end'. Обратите внимание, что justify-items игнорируется в разметке Flexbox. \*/
justify-items: self-start;
justify-items: self-end;
justify-items: left; /\* Выровнять элементы по левому краю \*/
justify-items: right; /\* Выровнять элементы по правому краю \*/

/\* Исходное выравнивание \*/
justify-items: baseline;
justify-items: first baseline;
justify-items: last baseline;

/\* Выравнивание при переполнении (только для выравнивания положения) \*/
justify-items: safe center;
justify-items: unsafe center;

/\* Унаследованное выравнивание \*/
justify-items: legacy right;
justify-items: legacy left;
justify-items: legacy center;

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

Этот атрибут может принимать одну из четырёх различных форм:

* Основные ключевые слова: одно из значений ключевого слова: `normal`, `auto`, или `stretch`.
* Исходное выравнивание: ключевое слово `baseline` плюс одно ключевое слово по выбору: `first` или `last`.
* Выравнивание положения: одно из ключевых слов: `center`, `start`, `end`, `flex-start`, `flex-end`, `self-start`, `self-end`, `left`, или `right`. Плюс ключевое слово по выбору: `safe` или `unsafe`.
* Унаследованное выравнивание: ключевое слово `legacy`, за которым следует ключевое слово `left` или `right`.
### Значения

`auto`

Используемое значение является значением атрибута `justify-items` родительского блока. Если у блока нет родительского элемента или он абсолютно спозиционирован, то в этих случаях значение `auto` представляет собой значение `normal`.

`normal`

Эффект этого атрибута зависит от выбранного способа разметки:

* Используя разметку с помощью блоков (block-level layout), это ключевое слово является синонимом слова `start`
* Для разметки с абсолютно позиционированный элементами, это ключевое слово ведёт себя как `start` на заменённых блоках с абсолютным позиционированием и как `stretch` на всех остальных блоках с абсолютным позиционированием
* Используя разметку с помощью ячеек таблицы (table cell layout), это ключевое слово не имеет значения, так как этот атрибут *игнорируется*
* Используя разметку с помощью гибких блоков (flexbox layout), это ключевое слово не имеет значения, так как этот атрибут *игнорируется*
* Используя разметку с помощью сетки (grid layout), это ключевое слово приводит к поведению, аналогичному поведению `stretch`, за исключением блоков с соотношением сторон или внутренних размеров, где оно ведёт себя как `start`

`start`

Элемент выравнивается на одном уровне друг с другом по направлению к начальной границе контейнера выравнивания по соответствующей оси.

`end`

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

`flex-start`

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как `start`.

`flex-end`

Для элементов, которые не являются потомками flex контейнера, это значение обрабатывается как `end`.

`self-start`

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

`self-end`

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

`center`

Элементы выравниваются на одном уровне друг с другом по направлению к центру контейнера выравнивания.

`left`

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

`right`

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

`baseline first baseline`
`last baseline`

Определяет участие значений `first baseline` или `last baseline` в исходном выравнивании. Значение `baseline` выравнивает первый или последний блок набора в соответствии с исходным выравниванием в общем первом или последнем наборе всех блоков в его совместной группе исходного выравнивания.Возвратным выравниванием для `first baseline` является значение `start`, для `last baseline` является значение `end`.

`stretch`

Если объединённый размер элементов меньше, чем размер контейнера выравнивания, то размер любого элемента со значением `auto` увеличивается одинаково (не пропорционально), но при этом соблюдаются ограничения, налагаемые `max-height`/`max-width` (или эквивалентной функциональностью), таким образом, что объединённый размер точно заполняет контейнер выравнивания.

`safe`

Если размер элемента выходит за пределы контейнера выравнивания, элемент выравнивается, как если бы режим выравнивания имел значение `start`.

`unsafe`

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

`legacy`

Создаёт значение, унаследованное потомками блока. Обратите внимание, что если потомок имеет значение `justify-self: auto`, ключевое слово `legacy` не учитывается по нисходящему наследованию. Действует только со значением `left`, `right`, или `center`, связанным с ним.

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

justify-items =
  normal                                              | (en-US)
  stretch                                             | (en-US)
  <baseline-position>                                 | (en-US)
  <overflow-position>? (en-US) [ (en-US) <self-position> | (en-US) left | (en-US) right ] (en-US)  | (en-US)
  legacy                                              | (en-US)
  legacy && (en-US) [ (en-US) left | (en-US) right | (en-US) center ] (en-US)                 | (en-US)
  anchor-center

<baseline-position> =
  [ (en-US) first | (en-US) last ] (en-US)? (en-US)  && (en-US)
  baseline

<overflow-position> =
  unsafe  | (en-US)
  safe

<self-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  self-start  | (en-US)
  self-end    | (en-US)
  flex-start  | (en-US)
  flex-end

```

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # justify-items-property |

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

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

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

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

* CSS Руководство по Grid: *Выравнивание блоков в разметке Grid*
* CSS Выравнивание блоков
* Сокращённый атрибут `place-items`
* Атрибут `justify-self` (en-US)
* Атрибут `align-items`


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

justify-content
===============

CSS свойство **`justify-content`** определяет, как браузер распределяет пространство между и вокруг элементов контента вдоль главной оси flex контейнера, или вдоль строчной оси grid контейнера.

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

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

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

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

```css
/\* Позиционное выравнивание \*/
justify-content: center; /\* Выравнивание элементов по центру \*/
justify-content: start; /\* Выравнивание элементов в начале \*/
justify-content: end; /\* Выравнивание элементов в конце \*/
justify-content: flex-start; /\* Выравнивание флекс-элементов с начала \*/
justify-content: flex-end; /\* Выравнивание флекс-элементов с конца \*/
justify-content: left; /\* Выравнивание элементов по левому краю \*/
justify-content: right; /\* Выравнивание элементов по правому краю \*/

/\* Выравнивание относительно осевой линии \*/
justify-content: baseline;
justify-content: first baseline;
justify-content: last baseline;

/\* Распределённое выравнивание \*/
justify-content: space-between; /\* Равномерно распределяет все элементы по ширине flex-блока.
 Первый элемент вначале, последний в конце \*/
justify-content: space-around; /\* Равномерно распределяет все элементы по ширине flex-блока.
 Все элементы имеют полноразмерное пространство

 с обоих концов \*/
justify-content: space-evenly; /\* Равномерно распределяет все элементы по ширине flex-блока.
 Все элементы имеют равное пространство вокруг \*/
justify-content: stretch; /\* Равномерно распределяет все элементы по ширине flex-блока.
 Все элементы имеют "авто-размер", чтобы соответствовать

 контейнеру \*/

/\* Выравнивание при переполнении \*/
justify-content: safe center;
justify-content: unsafe center;

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

### Значения

`start`

Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси.

`end`

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

`flex-start`

Элементы располагаются друг за другом и прижимаются к началу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как `start`.

`flex-end`

Элементы располагаются друг за другом и прижимаются к концу контейнера по главной оси, в зависимости от её направления (flex-direction). Для элементов, которые не являются дочерними элементами flex контейнера, это значение обрабатывается как `end`.

`center`

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

`left`

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

`right`

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

`normal`

Элементы располагаются на своих обычных позициях, так как будто свойство `justify-content` не задано. Этот параметр ведёт себя как `stretch` в grid и flex контейнерах.

`baseline first baseline`
`last baseline`

 Specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box's first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group.
 The fallback alignment for `first baseline` is `start`, the one for `last baseline` is `end`.

`space-between`

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

`space-around`

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

`space-evenly`

Элементы равномерно распределены вдоль главной оси контейнера. Расстояния между каждой парой соседних элементов равны расстояниям от начала контейнера до первого элемента и от последнего элемента до конца контейнера.

`stretch`

If the combined size of the items is less than the size of the alignment container, any `auto`-sized items have their size increased equally (not proportionally), while still respecting the constraints imposed by `max-height`/`max-width` (or equivalent functionality), so that the combined size exactly fills the alignment container along the main axis.

**Примечание:** `stretch` не поддерживается гибкими контейнерами (flexbox).

`safe`

If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were `start`.

`unsafe`

Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

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

justify-content =
  normal                                              | (en-US)
  <content-distribution>                              | (en-US)
  <overflow-position>? (en-US) [ (en-US) <content-position> | (en-US) left | (en-US) right ] (en-US)

<content-distribution> =
  space-between  | (en-US)
  space-around   | (en-US)
  space-evenly   | (en-US)
  stretch

<overflow-position> =
  unsafe  | (en-US)
  safe

<content-position> =
  center      | (en-US)
  start       | (en-US)
  end         | (en-US)
  flex-start  | (en-US)
  flex-end

```

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

### CSS

```css
#container {
  display: flex;
  justify-content: space-between; /\* Может быть изменено \*/
}

#container > div {
  width: 100px;
  height: 100px;
  background: linear-gradient(-45deg, #788cff, #b4c8ff);
}
```

```
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>
<select id="justifyContent">
  <option value="start">start</option>
  <option value="end">end</option>
  <option value="flex-start">flex-start</option>
  <option value="flex-end">flex-end</option>
  <option value="center">center</option>
  <option value="left">left</option>
  <option value="right">right</option>
  <option value="baseline">baseline</option>
  <option value="first baseline">first baseline</option>
  <option value="last baseline">last baseline</option>
  <option value="space-between" selected>space-between</option>
  <option value="space-around">space-around</option>
  <option value="space-evenly">space-evenly</option>
  <option value="stretch">stretch</option>
</select>
```

```
var justifyContent = document.getElementById("justifyContent");
justifyContent.addEventListener("change", function (evt) {
  document.getElementById("container").style.justifyContent = evt.target.value;
});
```

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

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

| Specification |
| --- |
| CSS Box Alignment Module Level 3 # align-justify-content |
| CSS Flexible Box Layout Module Level 1 # justify-content-property |

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

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

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

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

* Гид по CSS Flexbox: *Основные понятия Flexbox*
* CSS Flexbox Guide: *Выравнивание элементов во Flex контейнере*
* CSS Grid Guide: *Выравнивание ячейки в CSS Grid layout*
* Выравнивание полей CSS


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

Селекторы по классу
===================

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

В HTML документе, селекторы по CSS классу находят элементы с нужным классом. Атрибут класса определяется как разделённый пробелами список элементов, и один из этих пунктов должен точно соответствовать имени класса, приведённому в селекторе.

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

.classname { style properties }
```

Это эквивалентно следующему `селектор по атрибуту`:
```

[class~=classname] { style properties }
```

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

### CSS

```css
span.classy {
  background-color: DodgerBlue;
}
```

### HTML

```html
<span class="classy">Здесь span с каким-то текстом.</span>
<span>А тут другой span.</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # class-html |

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

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


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

Список селекторов
=================

CSS **список селекторов** (`,`) выбирает все соответствующие ноды.

```css
/\* Выбирает все соответствующие элементы \*/
span,
div {
  border: red 2px solid;
}
```

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

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

element, element, element { свойства стиля }
```

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

### Группирование на одной линии

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

```css
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: helvetica;
}
```

### Мультистрочное группирование

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

```css
#main,
.content,
article {
  font-size: 1.1em;
}
```

### Невалидные списки селекторов

Недостатком использования списков селекторов является то, что они не являются эквивалентными:

```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
h1,
h2:maybe-unsupported,
h3 {
  font-family: sans-serif;
}
```

Это происходит потому, что один неподдерживаемый селектор в списке селекторов делает недействительным все правило.

Есть способ исправить это - нужно использовать селектор `:is()`, который просто игнорирует недопустимые селекторы в своих аргумента, но за счёт этого, все селекторы имеют одинаковую спецификацию, так как `:is()` вычисляет спецификацию.

```css
h1 {
  font-family: sans-serif;
}
h2:maybe-unsupported {
  font-family: sans-serif;
}
h3 {
  font-family: sans-serif;
}
```

```css
:is(h1, h2:maybe-unsupported, h3) {
  font-family: sans-serif;
}
```

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

| Specification |
| --- |
| Selectors Level 4 # grouping |

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

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

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

* The `:is()`
Экспериментальная возможность
 and `:where()`
Экспериментальная возможность
 pseudo-classes, which don't have the legacy mistake that is selector list invalidation.


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

Селектор дочерних элементов
===========================

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

`Комбинатор >` разделяет 2 селектора, находит элементы заданные вторым селектором, являющие **прямыми** потомками для элементов отобранных первым селектором. Напротив, два селектора в селекторе потомков находят элементы не обязательно являющиеся прямыми потомками, т.е. несмотря на количество "прыжков" до них в DOM.

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

selector1 > selector2 { style properties }
```

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

```css
span {
  background-color: white;
}
div > span {
  background-color: DodgerBlue;
}
```

```html
<div>
  <span
 >Span 1 в div
    <span>Span 2 в span, который в div</span>
  </span>
</div>
<span>Span 3. Не в div вообще</span>
```

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

| Specification |
| --- |
| Selectors Level 4 # child-combinators |

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

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


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

<integer>
=========

**`<integer>`** - тип хранения данных в CSS - является частным случаем типа `<number>`, который представляет целые числа: как положительное, так и отрицательное. Целые числа могу быть использованы в свойствах CSS , таких как `column-count`, `counter-increment` (en-US), `grid-column`, `grid-row` (en-US), и `z-index`.

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

Тип данных `<integer>` состоит из одного или нескольких дробных цифр, от 0 до 9 включительно, символы `+` и `-` необязательны. Не существует единицы измерения, связанной с целочисленным типом данных.

**Примечание:** Не существует официального диапазона значений типа `<integer>`. Opera 12.1 поддерживает значения до 215-1, IE - до 220-1, а остальные браузеры даже выше. На протяжении существования значений CSS3 было проведено не большое количество обсуждений об установлении минимального диапазона: последнее решение, в апреле 2012 на протяжении фазы LC, было [-227-1; 227-1], но остальные значения, такие как 224-1 и 230-1, также были предложены. Однако, самая свежая на данный момент спецификация более не указывает на область определения этого типа данных.

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

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

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

### Корректные значения целочисленного типа данных
```

12          Положительное целое число (без предшествующего знака +)
+123        Положительное целое число (С предшествующим знаком +)
-456        Отрицательное целое число
0           Нуль
+0          Нуль, с предшествующим +
-0          Нуль, с предшествующим -
```

### Некорректные значения целочисленного типа данных
```

12.0        Это <number>, а не <integer>, хоть и представляется как целое число.
12.         "Дробные" точки запрещены.
+---12      Разрешён только один предшествующий символ +/-.
десять      Буквы запрещены.
_5          Специальные знаки запрещены.
\35         Экранированные символы Юникода запрещены, даже если они являются целым числом (здесь: 5).
\4E94       Разрешены только арабские цифры, даже в случае, если они экранированны (здесь: японское число 5, 五).
3e4         Научные обозначения запрещены.
```

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

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

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

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

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

* `<number>`