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

Использование CSS переходов
===========================

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

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

Анимации, составляющие переход между двумя состояниями, часто называют *неявными переходами*, так как промежуточные состояния в период между начальным и конечным состоянием неявно определяются браузером.
 ![A CSS transition tells the browser to draw the intermediate states between the initial and final states, showing the user a smooth transitions.](/files/4529/TransitionsPrinciple.png)

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

**Примечание:** CSS переходы могут использоваться без префиксов, однако спецификация только недавно достигла стабильности, префиксы по-прежнему необходимы для браузеров на WebKit. Они также необходимы для поддержки старых версий браузеров (таких как: Firefox 15, Opera 12 и более ранних). Таблица совместимости приведена внизу страницы с ещё большим количеством информации.

Какие CSS-свойства анимируются?
-------------------------------

Разработчик может определить какое свойство и как анимировать. Это позволяет создавать сложные переходы. Так как некоторые свойства не имеет смысла анимировать, перечень доступных для анимирования свойств (en-US) ограничен определённым набором.

**Примечание:** Замечание: Перечень анимируемых свойств может меняться по мере изменения спецификации.

**Примечание:** Значение свойства `auto` является сложным случаем. Спецификация не рекомендует анимировать в значение `auto` и из значения `auto`. Браузеры, основанные на Gecko, исполняют это требование в точности, а основанные на WebKit не так строго. Использование переходов с `auto` следует избегать, так как это может привести к непредсказуемым результатам, в зависимости от браузера и его версии.

**Примечание:** Необходимо также соблюдать осторожность при использовании переходов сразу после добавления элемента в DOM с помощью `.appendChild()` или удаления его `display: none; свойства`. Это выглядит, как будто никогда не происходило начальное состояние, а элемент всегда был в конечном состоянии. Самый простой способ преодолеть это ограничение - применить `window.setTimeout()` c некоторым количеством миллисекунд до изменения CSS-свойства, которое вы собираетесь анимировать.

### Пример анимирования нескольких свойств

#### HTML

```html
<body>
  <p>
    К блоку ниже применятся анимации для свойств: width, height,
    background-color, transform. Наведите на него, чтоб увидеть, как они
    анимируются
  </p>
  <div class="box"></div>
</body>
```

#### CSS

```css
.box {
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000ff;
  -webkit-transition:
    width 2s,
    height 2s,
    background-color 2s,
    -webkit-transform 2s;
  transition:
    width 2s,
    height 2s,
    background-color 2s,
    transform 2s;
}

.box:hover {
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}
```

CSS-свойства, определяющие переходы
-----------------------------------

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

Можно контролировать определённые параметры перехода следующими подсвойствами:

**(Заметьте, что циклы переходов бесконечны только для наших примеров; CSS `transition`s только анимируют смену свойства. Если вам нужно визуализировать этот цикл, обратите внимание на свойство `animation` (en-US).)**

* `transition-property` (en-US)
    + : Указывает имя или имена свойств, чьи переходы должны анимироваться. Только свойства, указанные здесь, анимируются в переходах; изменение других свойств будет происходить обычным образом.
* `transition-duration`
    + : Определяет время происхождения перехода. Можно указать время анимирования всех свойств перехода сразу или для каждого свойства в отдельности. `transition-duration: 0.5s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 0.5s;
      transition-timing-function: ease-in-out;
    }
    .box1 {
      transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 0.5s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transformv color;
      transition-duration: 0.5s;
      transition-timing-function: ease-in-out;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-duration: 1s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top -webkit-transform color;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform color;
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
    }
    .box1 {
      transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top -webkit-transform transform color;
      -webkit-transition-duration: 1s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 1s;
      transition-timing-function: ease-in-out;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-duration: 2s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 2s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 2s;
      transition-timing-function: ease-in-out;
    }
    .box1 {
      transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 2s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 2s;
      transition-timing-function: ease-in-out;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-duration: 4s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }
    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 4s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 4s;
      transition-timing-function: ease-in-out;
    }
    .box1 {
      transform: rotate(270deg);
      -webkit-transform: rotate(270deg);
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top transform -webkit-transform color;
      -webkit-transition-duration: 4s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        transform -webkit-transform color;
      transition-duration: 4s;
      transition-timing-function: ease-in-out;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```
* `transition-timing-function` (en-US)
    + :
     ![](/files/3434/TF_with_output_gt_than_1.png)Определяет функцию, указывающую, как вычисляются промежуточные значения свойств. Вы также можете выбрать ослабления от функции замедления Шпаргалка.Большинство функций времени (en-US) может быть определено графиком соответствующей функции, образующей четырьмя точками кривую Безье. Также можете выбрать функцию отсюда Easing Functions Cheat Sheet.`transition-timing-function: ease`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: ease;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: ease;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: linear`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: linear;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: linear;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: step-end`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: step-end;
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: step-end;
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

`transition-timing-function: steps(4, end)`
```

<div class="parent">
  <div class="box">Lorem</div>
</div>
```

```
.parent {
  width: 250px;
  height: 125px;
}
.box {
  width: 100px;
  height: 100px;
  background-color: red;
  font-size: 20px;
  left: 0px;
  top: 0px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
.box1 {
  width: 50px;
  height: 50px;
  background-color: blue;
  color: yellow;
  font-size: 18px;
  left: 150px;
  top: 25px;
  position: absolute;
  -webkit-transition-property: width height background-color font-size left
    top color;
  -webkit-transition-duration: 2s;
  -webkit-transition-timing-function: steps(4, end);
  transition-property: width height background-color font-size left top color;
  transition-duration: 2s;
  transition-timing-function: steps(4, end);
}
```

```
function updateTransition() {
  var el = document.querySelector("div.box");

  if (el) {
    el.className = "box1";
  } else {
    el = document.querySelector("div.box1");
    el.className = "box";
  }

  return el;
}

var intervalID = window.setInterval(updateTransition, 7000);
```

* `transition-delay` (en-US)
    + : Определяет как много должно пройти времени, перед тем как начнётся переход.
     `transition-delay: 0.5s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 0.5s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 0.5s;
      transition-timing-function: linear;
    }

    .box1 {
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 0.5s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 0.5s;
      transition-timing-function: linear;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-delay: 1s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 1s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: linear;
    }

    .box1 {
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 1s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 1s;
      transition-timing-function: linear;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-delay: 2s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 2s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 2s;
      transition-timing-function: linear;
    }

    .box1 {
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 2s;
      -webkit-transition-timing-function: linear;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 2s;
      transition-timing-function: linear;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

    `transition-delay: 4s`

    ```
    <div class="parent">
      <div class="box">Lorem</div>
    </div>

    ```

    ```
    .parent {
      width: 250px;
      height: 125px;
    }

    .box {
      width: 100px;
      height: 100px;
      background-color: red;
      font-size: 20px;
      left: 0px;
      top: 0px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 4s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 4s;
      transition-timing-function: ease-in-out;
    }

    .box1 {
      width: 50px;
      height: 50px;
      background-color: blue;
      color: yellow;
      font-size: 18px;
      left: 150px;
      top: 25px;
      position: absolute;
      -webkit-transition-property: width height background-color font-size left
        top color;
      -webkit-transition-duration: 2s;
      -webkit-transition-delay: 4s;
      -webkit-transition-timing-function: ease-in-out;
      transition-property: width height background-color font-size left top
        color;
      transition-duration: 2s;
      transition-delay: 4s;
      transition-timing-function: ease-in-out;
    }

    ```

    ```
    function updateTransition() {
      var el = document.querySelector("div.box");

      if (el) {
        el.className = "box1";
      } else {
        el = document.querySelector("div.box1");
        el.className = "box";
      }

      return el;
    }

    var intervalID = window.setInterval(updateTransition, 7000);

    ```

Короткая запись синтаксиса:

```css
div {
  transition: <property> <duration> <timing-function> <delay>;
}
```

Определение завершения перехода
-------------------------------

Есть событие, срабатывающее, когда переход завершён. Во всех браузерах, совместимых со стандартами, есть событие `transitionend`, в WebKit есть `webkitTransitionEnd`. Смотрите таблицу поддержки браузерами для дополнительной информации. У `transitionend` есть 2 свойства:

`propertyName`

Строка, показывающая изменение какого свойства завершено.

`elapsedTime`

Число с точкой, какое количество времени переход выполнялся, до того как запустилось событие. Это значение не равно свойству `transition-delay` (en-US).

Как обычно, используйте метод `element.addEventListener()`, чтобы следить за этим событием:

```js
el.addEventListener("transitionend", updateTransition, true);
```

**Примечание:** Событие `transitionend` не произойдёт, когда переход был прерван до его завершения, например, если установили `display``: none` или значение анимируемого свойства изменилось`.`

Когда у списков значений свойств разные длины
---------------------------------------------

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

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s;
}
```

Это рассматривается, как если бы это было:

```css
div {
  transition-property: opacity, left, top, height;
  transition-duration: 3s, 5s, 3s, 5s;
}
```

Похожим образом, если какой-то список свойств длиннее, чем у `transition-property` (en-US), он обрезается:

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s, 2s, 1s;
}
```

Будет интерпретировано как:

```css
div {
  transition-property: opacity, left;
  transition-duration: 3s, 5s;
}
```

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

Пример 4 секунды выполняет плавное изменение шрифта за 2 секунды, после того как пользователь навёл мышь на элемент:

```css
#delay1 {
  position: relative;
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 14px;
}

#delay1:hover {
  transition-property: font-size;
  transition-duration: 4s;
  transition-delay: 2s;
  font-size: 36px;
}
```

Использование переходов для подсвечивания меню
----------------------------------------------

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

Перед тем, как вы посмотрите на код, возможно захотите посмотреть на живое демо (считаем, что ваш браузер поддерживает переходы). Также может посмотреть на CSS, используемый этим примером.

Сначала зададим меню в HTML:

```html
<div class="sidebar">
  <p><a class="menuButton" href="home">Home</a></p>
  <p><a class="menuButton" href="about">About</a></p>
  <p><a class="menuButton" href="contact">Contact Us</a></p>
  <p><a class="menuButton" href="links">Links</a></p>
</div>
```

Теперь напишем CSS для нашего меню:

```css
.menuButton {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  text-align: left;
  background-color: grey;
  left: 5px;
  top: 5px;
  height: 26px;
  color: white;
  border-color: black;
  font-family: sans-serif;
  font-size: 20px;
  text-decoration: none;
  box-shadow: 2px 2px 1px black;
  padding: 2px 4px;
  border: solid 1px black;
}

.menuButton:hover {
  position: relative;
  transition-property: background-color, color;
  transition-duration: 1s;
  transition-timing-function: ease-out;
  background-color: white;
  color: black;
  box-shadow: 2px 2px 1px black;
}
```

Этот CSS устанавливает внешний вид меню, с фоном и цветом текста, изменяющимися при наведении (`:hover`).

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

Использование переходов, чтобы сделать JavaScript функциональность плавной
--------------------------------------------------------------------------

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

```html
<p>Кликните куда-нибудь, чтобы подвинуть шар</p>
<div id="foo"></div>
```

Используя JavaScript, добиваемся эффекта перемещения шара на определённую позицию:

```js
var f = document.getElementById("foo");
document.addEventListener(
  "click",
  function (ev) {
    f.style.transform = "translateY(" + (ev.clientY - 25) + "px)";
    f.style.transform += "translateX(" + (ev.clientX - 25) + "px)";
  },
  false,
);
```

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

```css
p {
  padding-left: 60px;
}

#foo {
  border-radius: 50px;
  width: 50px;
  height: 50px;
  background: #c00;
  position: absolute;
  top: 0;
  left: 0;
  transition: transform 1s;
}
```

Можете поиграть с этим здесь: http://jsfiddle.net/9h261pzo/291/

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

| Specification |
| --- |
| CSS Transitions  |

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

* Нижнее меню с использованием CSS переходов
* Интерфейс `TransitionEvent` (en-US) и событие `transitionend (en-US)`.
* Использование CSS-анимаций


Базовые концепции CSS Scroll Snap - CSS: каскадные таблицы стилей

Базовые концепции CSS Scroll Snap
=================================

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

Основы Scroll Snap
------------------

Ключевыми свойствами спецификации Scroll Snap являются `scroll-snap-type` и `scroll-snap-align` (en-US). Свойство `scroll-snap-type` применяется к скролл-контейнеру для определения типа и направления прокрутки.

Свойство `scroll-snap-align` нужно применять к дочерним элементам, чтобы указать позицию, к которой будет привязана прокрутка. Пример ниже демонстрирует прокрутку с привязкой вдоль оси `y`, а свойство `scroll-snap-align` применяется для элемента "section", чтобы задать точку, на которой прокрутка должна остановиться.

Свойство scroll-snap-type
-------------------------

Свойство `scroll-snap-type` необходимо, чтобы задавать направление, в котором будет происходить привязка прокрутки. Значением свойства может быть `x`, `y`, или соответствующие логические `block` или `inline`. Также можно использовать ключевое слово `both`, чтобы привязка работала в обоих направлениях.

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

Использование `mandatory` делает взаимодействие с интерфейсом однородным и предсказуемым — вы знаете, что браузер всегда будет смещать область видимости к каждой заданной точке привязки. Это даёт уверенность в том, что в после прокрутки экрана, в его верхней части окажется именно то, что вы и ожидаете там увидеть.Однако, это может привести и к проблемам, если содержимое слишком большое по высоте — пользователи могут оказаться в очень неприятной ситуации, не имея возможности переместиться к определённому месту на странице странице. Следовательно, применение `mandatory` должно быть тщательно продуманным и использовано только в тех ситуациях, когда вы точно знаете, какое количество содержимого будет на экране в каждый момент времени.

При значении `proximity` привязка будет осуществляться только в тех ситуациях, когда область видимости находится достаточно близко к точке привязки. Определение точного расстояния, на котором это будет происходить, остаётся за браузером. В примере ниже вы можете изменить значение с `mandatory` на `proximity`, чтобы увидеть, как это влияет на работу прокрутки.

Свойство scroll-snap-align
--------------------------

Свойство `scroll-snap-align` (en-US) может принимать значения `start`, `end`, или `center`, обозначающие, какую сторону контейнера прижимать к дочернему элементу. В примере ниже вы можете изменить значение `scroll-snap-align`, чтобы увидеть, как это повлияет на работу прокрутки.

Внутренний отступ контейнера
----------------------------

Если вы не хотите, чтобы содержимое вплотную прилегало к краю прокручиваемого контейнера, можете воспользоваться сокращённым свойством `scroll-padding` (en-US) или альтернативными ему более конкретными свойствами `scroll-padding-*`, чтобы задать для прокрутки внутренние отступы с каждой стороны контейнера.

В примере ниже для свойства `scroll-padding` установлено значение 40 пикселей. Когда происходит смещение к началу второй и третьей секции, прокрутка останавливается в 40 пикселях от начала элемента. Попробуйте изменить значение свойства `scroll-padding`, чтобы увидеть изменение размера отступа.

Это может быть полезно в ситуации, когда у вас есть фиксированно позиционированный элемент. Например, панель навигации, которая может перекрывать содержимое. С помощью `scroll-padding` вы можете оставить место для панели, как это сделано в примере ниже, где `<h1>` остаётся на экране, а содержимое при прокрутке оказывается под панелью. Без отступов шапка перекроет некоторую часть содержимого, когда произойдёт смещение к привязанной точке.

Внешние отступы дочерних элементов
----------------------------------

Свойство `scroll-margin` (en-US) может быть задано для дочерних элементов и определяет, по сути, внешний отступ данного элемента до позиции прокрутки. Это позволяет дочерним элементам занимать разное количество места, и может использоваться в сочетании со свойством `scroll-padding` для родителя. Опробуйте его в примере ниже

Свойство scroll-snap-stop
-------------------------

Свойство `scroll-snap-stop` (en-US) сообщает браузеру, обязательно ли ему останавливаться на каждой точке привязки дочерних элементов (это значит, что в примере выше мы бы останавливались в начале каждой секции) или допускается возможность пропускать их. Это свойство реализовано в меньшем количестве браузеров, чем другие свойства из данной спецификации.

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

**Примечание:** на данный момент свойство `scroll-snap-stop` помечено рискованным для использования в данной версии спецификации, следовательно может быть вообще удалено.


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

font-display
============

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

Дескриптор `font-display` определяет то, как шрифт, подключённый через font face будет отображаться в зависимости от того, загрузился ли он и готов ли к использованию.

### Временная шкала отображения шрифтов

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

Период блокировки шрифта (Font block period)

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

Период подмены шрифта (Font swap period)

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

Период отказа шрифта (Font failure period)

Если шрифт не загружен, пользовательский агент воспринимает это как неудачную загрузку и использует запасной шрифт.

|  |  |
| --- | --- |
| Связано с @-правила | `@font-face` |
| Начальное значение | `auto` |
| Обработка значения | как указано |

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

```css
/\* Ключевые слова \*/
font-display: auto;
font-display: block;
font-display: swap;
font-display: fallback;
font-display: optional;
```

### Значения

auto

Стратегию загрузки шрифта определяет пользовательский агент.

block

Для шрифта задаётся короткий период блокировки и бесконечный период подмены.

swap

Для шрифта не задаётся период блокировки и задаётся бесконечный период подмены.

fallback

Для шрифта задаётся очень короткий период блокировки и короткий период подмены.

optional

Для шрифта задаётся очень короткий период блокировки и не задаётся период подмены.

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

font-display =
  auto      | (en-US)
  block     | (en-US)
  swap      | (en-US)
  fallback  | (en-US)
  optional

```

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

```css
@font-face {
  font-family: ExampleFont;
  src:
    url(/path/to/fonts/examplefont.woff) format("woff"),
    url(/path/to/fonts/examplefont.eot) format("eot");
  font-weight: 400;
  font-style: normal;
  font-display: fallback;
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-display-desc |

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

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


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

font-family
===========

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

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

* Learn more
* See full compatibility
* Report feedback
CSS дескриптор **`font-family`** позволяет авторам указывать font family для шрифта, указанного в правиле `@font-face`.

|  |  |
| --- | --- |
| Связано с @-правила | `@font-face` |
| Начальное значение | `n/a (required)` |
| Обработка значения | как указано |

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

```css
/\* <string> значения \*/
font-family: "font family";
font-family: "another font family";

/\* <custom-ident> значение \*/
font-family: examplefont;
```

### Значения

`<family-name>`

Указывает имя font family.

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

font-family =
  <family-name>

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

```

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

```css
@font-face {
  font-family: examplefont;
  src: url("examplefont.ttf");
}
```

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

| Specification |
| --- |
| CSS Fonts Module Level 4 # font-family-desc |

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

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


Генератор рамок (border-image) - CSS: каскадные таблицы стилей

Генератор рамок (border-image)
==============================

Этот инструмент можно использовать для создания эффектов рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

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

Генератор скруглений границ (border-radius)

Визуальный инструмент для создания скруглённых границ с помощью CSS-свойства `border-radius`.

Генератор теней (box-shadow)

Визуальный инструмент для создания теней элементов с помощью CSS-свойства `box-shadow`.


Генератор теней (box-shadow) - CSS: каскадные таблицы стилей

Генератор теней (box-shadow)
============================

Этот инструмент можно использовать для создания эффектов теней элементов с помощью CSS-свойства `box-shadow`.

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

Генератор рамок (border-image)

Визуальный инструмент для создания рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

Генератор скруглений границ (border-radius)

Визуальный инструмент для создания скруглённых границ с помощью CSS-свойства `border-radius`.


Множественные фоны - CSS: каскадные таблицы стилей

Множественные фоны
==================

К элементам можно применить несколько фонов. Они накладываются друг на друга: фон, заданный первым, станет верхним, а заданный последним — нижним. Только последний фон может включать цвет фона.

Задавать `множественные фоны` легко:

```css
.myclass {
  background:
    background1,
    background2,
    /\* …, \*/ backgroundN;
}
```

Вы можете сделать это сокращённым свойством `background` и отдельными свойствами кроме `background-color`. Таким образом, следующие свойства могут быть определены в виде списка по одному на фон: `background`, `background-attachment`, `background-clip`, `background-image`, `background-origin`, `background-position`, `background-repeat`, `background-size`.

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

В этом примере заданы три фона: логотип Firefox, изображение пузырей и линейный градиент (en-US):

### HTML

```html
<div class="multi-bg-example"></div>
```

### CSS

```css
.multi-bg-example {
  width: 100%;
  height: 400px;
  background-image: url(firefox.png), url(bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0));
  background-repeat: no-repeat, no-repeat, no-repeat;
  background-position:
    bottom right,
    left,
    right;
}
```

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

Как вы можете видеть, логотип Firefox (первый в списке `background-image`) расположен сверху, далее идёт фон с пузырями и в самом низу градиент (указанный последним). Каждое последующее под-свойство (`background-repeat` и `background-position`) применяется к соответствующим фонам. Например, первое значение свойства `background-repeat` применяется к первому фону и т.д.

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

* Использование CSS-градиентов


Генератор скруглений границ (border-radius) - CSS: каскадные таблицы стилей

Генератор скруглений границ (border-radius)
===========================================

Этот инструмент можно использовать для создания эффектов скругления границ элементов с помощью CSS-свойства `border-radius`.

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

Генератор рамок (border-image)

Визуальный инструмент для создания рамок вокруг элементов с помощью CSS-свойства `border-image` (en-US).

Генератор теней (box-shadow)

Визуальный инструмент для создания теней элементов с помощью CSS-свойства `box-shadow`.


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

blur()
======

Функция CSS **`blur()`** применяет размытие по Гауссу к входному изображению. Его результатом является `<filter-function>`.

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

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

blur(radius)
```

### Параметры

`radius`

Радиус размытия, выраженный в `<length>`. Он определяет отклонение от стандартной функции Гаусса, то есть как много пикселей на экране смешиваются друг с другом. Таким образом, большее значение даст большее размытие. Значение `0` оставит изображение без изменений.

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

```css
blur(0)        /\* Без эффекта \*/
blur(8px)      /\* Размытие с радиусом 8px \*/
blur(1.17rem)  /\* Размытие с радиусом 1.17rem \*/
```

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

* `<filter-function>`
* `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)


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

invert()
========

Функция (en-US) CSS **`invert()`** инвертирует цвета изображения. Его результатом является `<filter-function>`.

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

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

```css
invert(amount)
```

### Parameters

`amount`

Степень преобразования, заданная в виде целого числа (`<number>`) или процента (`<percentage>`). Значение `100%` полностью инвертирует цвета, соответственно `0%` ничего не делает. Значения между `0%` и `100%` является линейными множителями эффекта. Начальное занчение для интерполяции — `0`.

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

### Примеры допустимых значений для invert()

```css
invert(0)     /\* Ничего не делает \*/
invert(.6)    /\* Инверсия цвета на 60% \*/
invert(100%)  /\* Полностью инвертированный цвет \*/
```

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

| Specification |
| --- |
| Filter Effects Module Level 1 # funcdef-filter-invert |

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

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

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

* `<filter-function>`
* `blur()`
* `brightness()` (en-US)
* `contrast()` (en-US)
* `drop-shadow()` (en-US)
* `grayscale()` (en-US)
* `hue-rotate()` (en-US)
* `opacity()` (en-US)
* `saturate()` (en-US)
* `sepia()` (en-US)


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

Выравнивание блоков в разметке Flexbox
======================================

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

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

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

Оси и атрибут flex-direction
----------------------------

Разметка flexbox следует согласно режиму чтения документа (writing mode), поэтому, если вы используете английский язык и устанавливаете атрибут `justify-content` в значение `flex-end`, то элементы будут выровнены по концу flex контейнера. Если вы работаете со значением атрибута `flex-direction`, установленным в `row`, то выравнивание будет происходить в линейном направлении.

Однако, работая с разметкой flexbox, вы можете изменить поведение главной оси, установив значение атрибута `flex-direction` в `column`. В этом случае, атрибут `justify-content` будет выравнивать элементы в направлении блока. Поэтому проще всего думать о главной и поперечной осях при работе с разметкой Flexbox следующим образом:

* Главная ось = направление согласно атрибуту `flex-direction` = выравнивание через атрибут `justify-content`
* Поперечная ось = проходит поперёк главной оси = выравнивание через атрибут `align-content`, `align-self`/`align-items`
### Выравнивание по Главной Оси

* `justify-content`
### Выравнивание по Поперечной Оси

* `align-self`
* `align-items`
* `align-content`
### Отсутствие атрибута justify-self в разметке Flexbox

При использовании разметки flexbox, главная ось работает с нашим контентом как с группой. Количество места, необходимого для размещения элементов, рассчитывается, а оставшееся пространство становится доступным для заполнения. Атрибут `justify-content` контролирует использование оставшегося пространства. Если установить атрибут `justify-content` в значение `flex-end`, то дополнительное пространство заполнится перед элементами, если установить атрибут `justify-content` в значение `space-around`, то пространство заполнится с обеих сторон элемента в этом измерении и т. д.

Это означает, что атрибут `justify-self` нет имеет смысла использовать в разметке flexbox, поскольку мы всегда имеем дело с перемещением всей группы элементов.

Использовать атрибут `align-self` имеет смысл при работе с поперечной осью, так как потенциально есть дополнительное пространство во flex контейнере в этом измерении, один элемент которого может быть перемещён и в начало, и в конец.

Выравнивание и свойство margin: auto
------------------------------------

В разметке flexbox присутствует конкретный вариант использования, в котором, возможно, понадобится атрибут `justify-self`. Например, когда будет необходимо разделить набор flex элементов для создания отдельного шаблона навигации. В таком случае, можно использовать атрибут `margin` со значением `auto`. Атрибут с таким значением будет занимать все доступное пространство в своём измерении. Так работает центрирование блока со свойством `margin:auto`. Установив значение атрибутов `margin-left` и `margin-right` в значение `auto`, обе стороны нашего блока попытаются занять все доступное пространство и, таким образом, заставят двигаться блок в центр.

Установив значение атрибута`margin` в `auto` для одного элемента в наборе с flex-элементами, выровненных с начала, можно создать разделённую навигацию. Это хорошо работает с разметкой flexbox и свойствами выравнивания. Как только для элемента со свойством `margin: auto` не остаётся свободного места, он станет вести себя также, как и все остальные flex элементы, и сократится в объёме, пытаясь уместиться в доступное пространство.

Атрибуты разрыва
----------------

* `row-gap`
* `column-gap`
* `gap`
### Создание разрыва фиксированного размера между элементами

На главной оси атрибут `column-gap` будет создавать разрывы фиксированного размера между соседними элементами.

На поперечной оси атрибут `row-gap` создаёт разрыв между соседними flex линиями, поэтому необходимо также установить атрибут `flex-wrap` в значение `wrap`, чтобы применить эффект.

**Примечание:** Примечание. Начиная с версии 63, Firefox является единственным браузером, в котором реализованы свойства разрыва в разметке Flexbox.

Ссылки
------

### CSS Атрибуты

* `justify-content`
* `align-content`
* `place-content` (en-US)
* `justify-items`
* `align-items`
* `place-items`
* `align-self`
* `row-gap`
* `column-gap`
* `gap`
### Глоссарий терминов

* Cross axis (en-US)
* Main axis
Руководства
-----------

* Выравнивание в разметке flexbox
Внешние ресурсы
---------------

* Шпаргалка по выравниваю блоков
* CSS разметки Grid, Flexbox и выравнивание блоков
* Размышления о частичной реализации выравнивания блоков


The Web Open Font Format (WOFF) - CSS: каскадные таблицы стилей

The Web Open Font Format (WOFF)
===============================

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

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

* Learn more
* See full compatibility
* Report feedback
**WOFF**(**Web Open Font Format**) — формат шрифтов, разработанный Mozilla совместно с Type Supply, LettError, и др. По сути — это сжатая версия формата `sfnt`, используемого шрифтами TrueType, OpenType, и Open Font Format, но с возможностью добавления мета-данных и приватных структур данных (private-use data structures). Например, в формате предусмотрены поля для ввода информации о лицензии.

Преимущества использования WOFF:

1. The font data is compressed, so sites using WOFF will use less bandwidth and will load faster than if they used equivalent uncompressed TrueType or OpenType files.
2. Many font vendors that are unwilling to license their TrueType or OpenType format fonts for use on the web will license WOFF format fonts. This improves availability of fonts to site designers.
3. Both proprietary and free software browser vendors like the WOFF format, so it has the potential of becoming a truly universal, interoperable font format for the web, unlike other current font formats.

Существует две версии WOFF, отличающихся используемым алгоритмом сжатия: WOFF и WOFF2. В правиле `@font-face` они определяются в дескрипторе `format` как `'woff'` или `'woff2'` соответственно.

Использование WOFF
------------------

You can use the `@font-face` CSS property to use WOFF fonts for text in web content. It works exactly like OpenType and TrueType format fonts do, except it will likely let your content download more efficiently due to the addition of compression.

Tools for working with WOFF fonts
---------------------------------

* Tools for working with WOFF fonts are available. `sfnt2woff` and `woff2sfnt` convert between WOFF and OpenType.
Спецификации
------------

| Specification |
| --- |
| WOFF File Format 1.0 # OverallStructure |
| WOFF File Format 2.0 # FileStructure |

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

### css.at-rules.font-face.WOFF

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

### css.at-rules.font-face.WOFF\_2

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

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

* `@font-face`


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

Понимание CSS z-index
=====================

Обычно HTML страницы можно считать двухмерными, потому что текст, картинки и другие элементы расположены на странице без перекрытия. Существует единый нормальный поток отрисовки (rendering flow) и элементы избегают пространства, занятого другими.`z-index` атрибут позволяет регулировать порядок наложения объектов друг на друга в процессе отрисовки контента (rendering content).

>
> *В CSS 2.1, позиция каждого блока была в трёх измерениях. В дополнении к их горизонтальной и вертикальной позиции блоки лежали вдоль оси "z" и располагались один поверх другого. Позиция относительно оси "z" особенно актуальна, когда блоки визуально накладываются друг на друга.*
>
>
>

(from CSS 2.1 Section 9.9.1 - Layered presentation)

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

Использование z-index кажется чрезвычайно простым: одно свойство, которому присваивается одно целое число, с простым для понимания поведением. Однако, когда z-index применяется к сложным иерархиям элементов HTML, его поведение может быть трудно понять или предсказать. Это объясняется целым комплексом правил "укладки" элементов. Фактически в спецификации CSS-2.1 Appendix E (CSS-2.1 Приложение Е) зарезервирован целый раздел, подробно объясняющий эти правила.

Данная статья попытается объяснить эти правила, с некоторым упрощением и несколькими примерами.

1. Позиционирование без z-индекса : правила по умолчанию
2. Позиционирование и float : как себя поводят float элементы c позиционированием
3. Использование z-index : Using z-index to change default stacking
4. The stacking context : Notes on the stacking context
5. Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
6. Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
7. Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level
### Информация о документе

* Автор: Paolo Lombardi
* Эта статья - английский перевод статьи, которую я написал на итальянском для YappY. Я даю право делиться всем контентом: Creative Commons: Attribution-Sharealike license
* Дата последнего обновления: 9 июля 2005 г.

Примечание автора: спасибо Владимиру Паланту и Роду Уайтли за обзор.


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

Using z-index
=============

The first part of this article, Stacking without the z-index property, explains how stacking is arranged by default. If you want to create a custom stacking order, you can use the `z-index` property on a positioned element.

Свойство `z-index` может иметь значение в целых числах (положительные, ноль, или отрицательные), что представляет собой позицию элемента вдоль оси z. Если вы не знакомы с **осью** z, представьте себе страницу как стопку слоёв, имеющих собственное порядковое число. Слои представлены в числовом порядке, with larger numbers above smaller numbers.

* bottom layer *(farthest from the observer)*
* ...
* Layer -3
* Layer -2
* Layer -1
* Layer 0 *(default rendering layer)*
* Layer 1
* Layer 2
* Layer 3
* ...
* top layer *(closest to the observer)*

**Примечание:**

* When no `z-index` property is specified, elements are rendered on the default rendering layer 0 (zero).
* If several elements share the same `z-index` value (i.e., they are placed on the same layer), stacking rules explained in the section Stacking without z-index apply.

In the following example, the layers' stacking order is rearranged using `z-index`. The `z-index` of element #5 has no effect since it is not a positioned element.

Source code for the example
---------------------------

### HTML

```html
<div id="abs1">
  <b>DIV #1</b>
  <br />position: absolute; <br />z-index: 5;
</div>

<div id="rel1">
  <b>DIV #2</b>
  <br />position: relative; <br />z-index: 3;
</div>

<div id="rel2">
  <b>DIV #3</b>
  <br />position: relative; <br />z-index: 2;
</div>

<div id="abs2">
  <b>DIV #4</b>
  <br />position: absolute; <br />z-index: 1;
</div>

<div id="sta1">
  <b>DIV #5</b>
  <br />no positioning <br />z-index: 8;
</div>
```

### CSS

```css
div {
  padding: 10px;
  opacity: 0.7;
  text-align: center;
}

b {
  font-family: sans-serif;
}

#abs1 {
  z-index: 5;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#rel1 {
  z-index: 3;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#rel2 {
  z-index: 2;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #696;
  background-color: #cfc;
  margin: 0px 50px 0px 50px;
}

#abs2 {
  z-index: 1;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #900;
  background-color: #fdd;
}

#sta1 {
  z-index: 8;
  height: 70px;
  border: 1px dashed #996;
  background-color: #ffc;
  margin: 0px 50px 0px 50px;
}
```

See also
--------

* Stacking without the z-index property: The stacking rules that apply when `z-index` is not used.
* Stacking with floated blocks: How floating elements are handled with stacking.
* The stacking context: Notes on the stacking context.
* Stacking context example 1: 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2: 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3: 3-level HTML hierarchy, z-index on the second level


Stacking without z-index - CSS: каскадные таблицы стилей

Stacking without z-index
========================

### Наложения без Z-индекса

Когда элементы не имеют z-индекса, они накладываются в таком порядке(снизу вверх):

1. Фон и границы корневого элемента.

2. Дочерние блоки в нормальном потоке в порядке размещения(в HTML порядке).

3. Дочерние позиционированные элементы, в порядке размещения (в HTML порядке).

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

>
> **Примечания:**
>
>
> * Given a homogeneous group of elements without any z-index property, such as the positioned blocks (DIV #1 to #4) in the example, the element's stacking order is their order in the HTML hierarchy, regardless of their position.
> * Standard blocks (DIV #5) in the normal flow, without any positioning property, are always rendered before positioned elements, and appear below them, even if they come later in the HTML hierarchy.
>
>
>

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

### HTML

```html
<div id="absdiv1">
  <br /><span class="bold">DIV #1</span> <br />position: absolute;
</div>
<div id="reldiv1">
  <br /><span class="bold">DIV #2</span> <br />position: relative;
</div>
<div id="reldiv2">
  <br /><span class="bold">DIV #3</span> <br />position: relative;
</div>
<div id="absdiv2">
  <br /><span class="bold">DIV #4</span> <br />position: absolute;
</div>
<div id="normdiv">
  <br /><span class="bold">DIV #5</span> <br />no positioning
</div>
```

### CSS

```css
.bold {
  font-weight: bold;
  font: 12px Arial;
}
#normdiv {
  height: 70px;
  border: 1px dashed #999966;
  background-color: #ffffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv1 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 30px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#reldiv2 {
  opacity: 0.7;
  height: 100px;
  position: relative;
  top: 15px;
  left: 20px;
  border: 1px dashed #669966;
  background-color: #ccffcc;
  margin: 0px 50px 0px 50px;
  text-align: center;
}
#absdiv1 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  left: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
#absdiv2 {
  opacity: 0.7;
  position: absolute;
  width: 150px;
  height: 350px;
  top: 10px;
  right: 10px;
  border: 1px dashed #990000;
  background-color: #ffdddd;
  text-align: center;
}
```

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

(If the image does not display in CodePen, click the Tidy button in the CSS section)

### Так же посмотрите

* Stacking and float : How floating elements are handled
* Adding z-index : Using z-index to change default stacking
* The stacking context : Notes on the stacking context
* Stacking context example 1 : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 : 3-level HTML hierarchy, z-index on the second level


Контекст наложения (stacking context) - CSS: каскадные таблицы стилей

Контекст наложения (stacking context)
=====================================

Контекст наложения (stacking context) это концепция трёхмерного расположения HTML-элементов вдоль оси Z по отношению к пользователю, находящемуся перед экраном. HTML-элементы занимают это место по порядку, основанному на атрибутах элемента.

« CSS « Understanding CSS z-index (en-US)

Контекст наложения
------------------

В предыдущем примере Добавляем z-index (en-US), порядок отображения определённых DIVs элементов зависел от их z-index значения. Это возникает благодаря тому, что у этих элементов есть специальные свойства, которые заставляют их формировать контекст наполнения ( *stacking context )*.

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

* является корневым элементом (HTML),
* позиционирован абсолютно (position:absolute) или относительно (position:relative) с z-index значением отличным от "auto",
* flex элемент с z-index отличным от "auto", чей родительский элемент имеет свойство display: flex|inline-flex,
* элементы с `opacity` меньше чем 1. (См. the specification for opacity),
* элементы с `transform` отличным от "none",
* элементы с `mix-blend-mode` значением отличным от "normal",
* элементы с `filter` значением отличным от "none",
* элементы с `isolation` установленным в "isolate",
* `position: fixed`
* если мы указываем элементу атрибут ``will-change`` при этом не обязательно присваивать ему значения (См. this post)
* элементы с `-webkit-overflow-scrolling` (en-US) установленным в "touch"

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

Суммируем:

* Позиционирование и присваивание HTML-элементам свойства z-index создаёт контекст наложения, (так же как и присваивание элементу opacity меньше 1).
* Контексты наложения могут быть частью других контекстов наложения и вместе создавать иерархию контекстов наложения.
* Каждый контекст наложения абсолютно независим от своего соседа: только подчинённые элементы учитываются при обработке контекста наложения.

**Примечание:** Иерархия контекстов наложения является подмножеством иерархии HTML-элементов, потому что только определённые элементы создают контексты наложения. Можно сказать, что элементы, которые не создают собственного контекста наложения, используют контекст наложения родителя.

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

![Example of stacking rules modified using z-index](/ru/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context/understanding_zindex_04.png)

В примере каждый позиционированный элемент создаёт свой контекст наложения, так как имеет свойства position и z-index. Иерархия контекстов наложения выглядит следующим образом:

* Root
    + DIV #1
    + DIV #2
    + DIV #3
        - DIV #4
        - DIV #5
        - DIV #6

Важно отметить, что DIV #4, DIV #5 и DIV #6 являются дочерними для DIV #3, поэтому они полностью располагаются в DIV#3. Once stacking and rendering within DIV #3 is completed, the whole DIV #3 element is passed for stacking in the root element with respect to its sibling's DIV.

**Примечание:**

* DIV #4 отрисовывается под DIV #1, потому что z-index (5) DIV #1 действителен внутри контакта наложения корневого элемента, в то время как z-index (6) DIV #4 действителен внутри контекста наложения DIV #3. Поэтому, DIV #4 находиться ниже DIV #1, потому что DIV #4 принадлежит DIV #3, который в свою очередь имеет меньший z-index(по сравнению с .DIV #1).
* По этим же причинам DIV #2 (z-index 2) отрисовывается под DIV#5 (z-index 1), так как DIV #5 принадлежит DIV #3, чей z-index больше( чем z-index DIV #2).
* У DIV #3 есть свойство z-index 4, но это значение независимо от z-index'ов DIV #4, DIV #5 и DIV #6, потому что принадлежат они разным контекстам наложения.
* An easy way to figure out the *rendering order* of stacked elements along the Z axis is to think of it as a "version number" of sorts, where child elements are minor version numbers underneath their parent's major version numbers. This way we can easily see how an element with a z-index of 1 (DIV #5) is stacked above an element with a z-index of 2 (DIV #2), and how an element with a z-index of 6 (DIV #4) is stacked below an element with a z-index of 5 (DIV #1). In our example (sorted according to the final rendering order):
    + Root
        - DIV #2 - z-index is 2
        - DIV #3 - z-index is 4
            * DIV #5 - z-index is 1, stacked under an element with a z-index of 4, which results in a rendering order of 4.1
            * DIV #6 - z-index is 3, stacked under an element with a z-index of 4, which results in a rendering order of 4.3
            * DIV #4 - z-index is 6, stacked under an element with a z-index of 4, which results in a rendering order of 4.6
        - DIV #1 - z-index is 5

Example Source Code
-------------------

```html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>
      Understanding CSS z-index: The Stacking Context: Example Source
    </title>

    <style type="text/css">
 \* {
 margin: 0;
 }
 html {
 padding: 20px;
 font:
 12px/20px Arial,
 sans-serif;
 }
 div {
 opacity: 0.7;
 position: relative;
 }
 h1 {
 font: inherit;
 font-weight: bold;
 }
 #div1,
 #div2 {
 border: 1px dashed #696;
 padding: 10px;
 background-color: #cfc;
 }
 #div1 {
 z-index: 5;
 margin-bottom: 190px;
 }
 #div2 {
 z-index: 2;
 }
 #div3 {
 z-index: 4;
 opacity: 1;
 position: absolute;
 top: 40px;
 left: 180px;
 width: 330px;
 border: 1px dashed #900;
 background-color: #fdd;
 padding: 40px 20px 20px;
 }
 #div4,
 #div5 {
 border: 1px dashed #996;
 background-color: #ffc;
 }
 #div4 {
 z-index: 6;
 margin-bottom: 15px;
 padding: 25px 10px 5px;
 }
 #div5 {
 z-index: 1;
 margin-top: 15px;
 padding: 5px 10px;
 }
 #div6 {
 z-index: 3;
 position: absolute;
 top: 20px;
 left: 180px;
 width: 150px;
 height: 125px;
 border: 1px dashed #009;
 padding-top: 125px;
 background-color: #ddf;
 text-align: center;
 }
 </style>
  </head>
  <body>
    <div id="div1">
      <h1>Division Element #1</h1>
      <code
 >position: relative;<br />
        z-index: 5;</code
 >
    </div>

    <div id="div2">
      <h1>Division Element #2</h1>
      <code
 >position: relative;<br />
        z-index: 2;</code
 >
    </div>

    <div id="div3">
      <div id="div4">
        <h1>Division Element #4</h1>
        <code
 >position: relative;<br />
          z-index: 6;</code
 >
      </div>

      <h1>Division Element #3</h1>
      <code
 >position: absolute;<br />
        z-index: 4;</code
 >

      <div id="div5">
        <h1>Division Element #5</h1>
        <code
 >position: relative;<br />
          z-index: 1;</code
 >
      </div>

      <div id="div6">
        <h1>Division Element #6</h1>
        <code
 >position: absolute;<br />
          z-index: 3;</code
 >
      </div>
    </div>
  </body>
</html>
```

### Division Element #1

```css
position: relative;
z-index: 5;
```

### Division Element #2

```css
position: relative;
z-index: 2;
```

### Division Element #3

```css
position: absolute;
z-index: 4;
```

### Division Element #4

```css
position: relative;
z-index: 6;
```

### Division Element #5

```css
position: relative;
z-index: 1;
```

### Division Element #6

```css
position: absolute;
z-index: 3;
```

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

* Stacking without z-index (en-US) : Default stacking rules
* Stacking and float (en-US) : How floating elements are handled
* Adding z-index (en-US) : Using z-index to change default stacking
* Stacking context example 1 (en-US) : 2-level HTML hierarchy, z-index on the last level
* Stacking context example 2 (en-US) : 2-level HTML hierarchy, z-index on all levels
* Stacking context example 3 (en-US) : 3-level HTML hierarchy, z-index on the second level


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

additive-symbols
================

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

Дескриптор аддитивных символов аналогичен дескриптору `symbols()` (en-US) и позволяет пользователю указывать символы которые будут использоваться для представлений счётчика, когда значение дескриптора `system` (en-US) *аддитивное*. Дескриптор `additive-symbols` определяет так называемые аддитивные кортежи, каждый из которых представляет собой пару, содержащую символ и неотрицательный целочисленный вес. Аддитивная система используется для построения систем нумерации знаков, таких как римские цифры.

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

|  |  |
| --- | --- |
| Связано с @-правила | `@counter-style` |
| Начальное значение | `n/a (required)` |
| Обработка значения | как указано |

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

```css
additive-symbols: 3 "0";
additive-symbols:
  3 "0",
  2 "\2E\20";
additive-symbols:
  3 "0",
  2 url(symbol.png);
```

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

additive-symbols =
  [ (en-US) <integer [0,∞]> && (en-US) <symbol> ] (en-US)# (en-US)

<symbol> =
  <string> (en-US)        | (en-US)
  <image>         | (en-US)
  <custom-ident>

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

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

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

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

```

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

### HTML

```html
<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>
```

### CSS

```css
@counter-style additive-symbols-example {
  system: additive;
  additive-symbols: I 1;
}
.list {
  list-style: additive-symbols-example;
}
```

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

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

| Specification |
| --- |
| CSS Counter Styles Level 3 # counter-style-symbols |

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

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

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

* `list-style` (en-US), `list-style-image`, `list-style-position` (en-US)
* `symbols()` (en-US), функциональная запись, создающая анонимные стили счётчиков.


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

inverted-colors
===============

CSS медиа функция **`inverted-colors`** может использоваться для проверки, инвертирует ли user agent или ОС цвета.

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

Функция `inverted-colors` указана в качестве значения ключевого слова, выбранного из списка ниже.

`none`

Цвета отображаются нормально.

`inverted`

Все пиксели в отображаемой области были инвертированы.

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

### HTML

```html
<p>
  Если вы используете инвертированные цвета, этот текст должен быть синим по
  белому (инверсия жёлтого по чёрному). Если нет, он должен быть красным на
  светло-сером.
</p>
<p>
  Если текст серого цвета, ваш браузер не поддерживает медиа-функцию
  `inverted-colors`.
</p>
```

### CSS

```css
p {
  color: gray;
}

@media (inverted-colors: inverted) {
  p {
    background: black;
    color: yellow;
  }
}

@media (inverted-colors: none) {
  p {
    background: #eee;
    color: red;
  }
}
```

### Result

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

| Specification |
| --- |
| Media Queries Level 5 # inverted |

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

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


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

scripting
=========

CSS медиа функция **`scripting`** может использоваться для проверки доступности скриптов (таких как JavaScript)

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

Функция **`scripting`** указывается в качестве значения ключевого слова, выбранного из списка ниже.

`none`

Скрипты полностью недоступны в текущем документе.

`initial-only`

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

`enabled`

Скрипты поддерживаются и активны в текущем документе.

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

### HTML

```html
<p class="script-none">You do not have scripting available. :-(</p>
<p class="script-initial-only">
  Your scripting is only enabled during the initial page load. Weird.
</p>
<p class="script-enabled">You have scripting enabled! :-)</p>
```

### CSS

```css
p {
  color: lightgray;
}

@media (scripting: none) {
  .script-none {
    color: red;
  }
}

@media (scripting: initial-only) {
  .script-initial-only {
    color: red;
  }
}

@media (scripting: enabled) {
  .script-enabled {
    color: red;
  }
}
```

### Result

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

| Specification |
| --- |
| Media Queries Level 5 # scripting |

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

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


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

prefers-color-scheme
====================

CSS медиа функция **`prefers-color-scheme`** может использоваться для определения того, светлую или тёмную тему использует пользователь в операционной системе.

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

`no-preference`

Указывает, что пользователь не сделал никаких предпочтений, известных системе. Значение этого ключевого слова оценивается как `false` в логическом контексте.

`light`

Указывает, что пользователь выбрал светлую тему в операционной системе.

`dark`

Указывает, что пользователь выбрал тёмную тему в операционной системе.

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

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

### HTML

```html
<div class="day">Day (initial)</div>
<div class="day light-scheme">Day (changes in light scheme)</div>
<div class="day dark-scheme">Day (changes in dark scheme)</div>
<br />

<div class="night">Night (initial)</div>
<div class="night light-scheme">Night (changes in light scheme)</div>
<div class="night dark-scheme">Night (changes in dark scheme)</div>
```

### CSS

```css
.day {
  background: #eee;
  color: black;
}
.night {
  background: #333;
  color: white;
}

@media (prefers-color-scheme: dark) {
  .day.dark-scheme {
    background: #333;
    color: white;
  }
  .night.dark-scheme {
    background: black;
    color: #ddd;
  }
}

@media (prefers-color-scheme: light) {
  .day.light-scheme {
    background: white;
    color: #555;
  }
  .night.light-scheme {
    background: #eee;
    color: black;
  }
}

.day,
.night {
  display: inline-block;
  padding: 1em;
  width: 7em;
  height: 2em;
  vertical-align: middle;
}
```

### Result

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-color-scheme |

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

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

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

* Редизайн вашего продукта и сайта для тёмного режима(en)


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

Ориентация
==========

CSS медиа-функции **`orientation`** может использоваться для проверки ориентации области просмотра (или поля страницы для медийных страниц).

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

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

Функция `orientation` указывается в качестве значения ключевого слова, выбранного из списка ниже.

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

`portrait`

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

`landscape`

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

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

### HTML

```html
<div>Вставка 1</div>
<div>Вставка 2</div>
<div>Вставка 3</div>
```

### CSS

```css
body {
  display: flex;
}

div {
  background: yellow;
}

@media (orientation: landscape) {
  body {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  body {
    flex-direction: column;
  }
}
```

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

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

| Specification |
| --- |
| Media Queries Level 4 # orientation |

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

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


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

prefers-reduced-motion
======================

CSS медиа функция **`prefers-reduced-motion`** может использоваться для определения того, запросил ли пользователь, чтобы ОС минимизировала количество анимации или движения, которые она использует.

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

`no-preference`

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

`reduce`

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

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

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

### HTML

```html
<div class="animation">animated box</div>
```

### CSS

```css
.animation {
  -webkit-animation: vibrate 0.3s linear infinite both;
  animation: vibrate 0.3s linear infinite both;
}

@media (prefers-reduced-motion: reduce) {
  .animation {
    animation: none;
    -webkit-animation: none;
  }
}
```

```
.animation {
  background-color: rebeccapurple;
  color: #fff;
  font:
    1.2em Helvetica,
    arial,
    sans-serif;
  width: 200px;
  padding: 1em;
  border-radius: 1em;
  text-align: center;
}

/\* ----------------------------------------------
 \* Generated by Animista on 2018-9-2 13:47:0
 \* w: http://animista.net, t: @cssanimista
 \* ---------------------------------------------- \*/

/\*\*
 \* ----------------------------------------
 \* animation vibrate-1
 \* ----------------------------------------
 \*/
@-webkit-keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
@keyframes vibrate {
  0% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }
  40% {
    -webkit-transform: translate(-2px, -2px);
    transform: translate(-2px, -2px);
  }
  60% {
    -webkit-transform: translate(2px, 2px);
    transform: translate(2px, 2px);
  }
  80% {
    -webkit-transform: translate(2px, -2px);
    transform: translate(2px, -2px);
  }
  100% {
    -webkit-transform: translate(0);
    transform: translate(0);
  }
}
```

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

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

| Specification |
| --- |
| Media Queries Level 5 # prefers-reduced-motion |

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

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

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

* An introduction to the reduced motion media query