Подборка полезных публикаций для веб-мастеров и заказчиков

Чего мне никогда не говорили о CSS


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

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

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

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

Терминология


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

Комбинатор потомков


Видели пробел между селекторами в вашем стиле? На самом деле у него есть название, это комбинатор потомков (descendant combinator).


Комбинатор потомков
 

Макет, отрисовка и композиция


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

1. Макет (layout)


Шаг макетирования — это расчёт, сколько места элемент занимает на экране. Изменение свойства 'layout' в CSS (например, ширина, высота) означает, что браузеру придётся проверить все остальные элементы и перерисовать страницу, то есть перекрасить затронутые области и наложить их друг на друга.
 

2. Отрисовка (paint)


Этот процесс заполняет пикселями все визуальные части элементов (цвета, границы и т. д.). Отрисовка элементов обычно выполняется на нескольких слоях.

Изменение свойства 'paint' не влияет на макет, поэтому браузер пропускает шаг макетирования, но всё равно делает отрисовку.

На отрисовку зачастую уходит больше всего времени при рендеринге.
 

3. Композиция (composite)


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

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

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

Производительность CSS

Селектор потомков может дорого обойтись


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

Например:


Пример селектора потомков

Браузеру придётся оценить все ссылки на странице, прежде чем перейти к тем, которые находятся внутри нашего раздела #nav.

Более эффективный способ — добавить конкретный селектор .navigation-link на каждую ссылку внутри раздела #nav.
 

Браузер считывает селекторы справа налево


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

Рассмотрим следующий пример:


Браузер читает справа налево

Шаги:
 

сохранить ссылку