Tag Archives: CSS

Каскадные таблицы стилей.

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

Это перевод статьи из блогов Adobe.

Вероятно, Вы уже использовали CSS-анимации и переходы в своих проектах (а если ещё нет, то ознакомиться с ними Вы можете по ссылкам: animations, transitions). Так же, вероятно Вы сталкивались с тем, что некоторые из анимаций проходят плавно, а некоторые “идут рывками”. Есть идеи, почему?

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

Continue reading

Понимание потока документа

Нормальный поток документа – модель, по которой элементы распологаются на странице в соответствии с CSS-спецификацией и своим расположением в исходном коде страницы.

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

Css-свойства float: left | right и position: absolute | fixed (но не position: relative) вытаскивают элемент из нормального потока и отображают его в соответствии с этими правилами. Это означает, что блок больше не будет оказывать влияния на соседние по разметке элементы из нормального потока: не будет отталкивать их с помощью margin‘ов и не будет занимать места в потоке (визуально это может выглядеть как наложение одного слоя на другой).

Continue reading