Каскад в CSS

Предыдущая статья Наследование в CSS.

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

Знаешь и то, что победителем можно назначить и более слабое (по специфичности) правило, используя директиву !important.

Возникает естественный вопрос: а что, если специфичности одинаковы?

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

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

Сортировка по источнику

Фактически, существует три возможных источника CSS-правил: стили автора, стили читателя, стили браузера.

Перечисляю в порядке убывания приоритета:

1. Стили автора — это тот CSS, который пишешь ты, когда делаешь страничку. Самый высокий приоритет.
2. Стили читателя — CSS который создают под себя некоторые особо продвинутые пользователи. Однако, это бывает крайне редко.
3. Cтили браузера — настройки-по умолчанию. Самый низкий приоритет. При граммотно составленом CSS у них практически нет шансов выиграть.

Сортировка по важности

Фактически все правила разделяются на группы — !important и обычные. И далее сортируются только в пределах своей группы. Это как будто козыря сравниваются только с козырями, а обычные карты — с обычными. Козырная шестерка бъет любого простого туза. Точно так и тут: правила, отмеченные, как !important всегда получат более высокий приоритет.

Чтобы окончательно нас запутать, сортировку по важности смешали с сортировкой по источнику. Логика такая: если читатель в своей таблице отметил правило, как !important, то значит ему очень нужен этот стиль! И даже авторский !important не должен перебить такое правило. Ведь пользователь точно знает, как ему удобнее! В конечном счете страница делается для посетителей, а не для разработчика.

В свете всего сказанного привожу список приоритетов с учетом как источника, так и важности (опять от сильных к слабым):

1. важные объявления читателя;
2. важные объявления автора;
3. обычные объявления автора;
4. обычные объявления читателя;
5. объявления агента пользователя;

Сортировка по специфичности

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

Сортировка по порядку расположения

Наконец, если важность, источник и специфичность правил совпадает, победителем считается правило, расположенное в таблице позже (ниже по тексту).

Таким образом, порядок в CSS имеет значение! В приведенном ниже примере победит второе правило и цвет будет красный.

<div class="red green">Зеленый или красный?</div>

.green {
	color: #0f0;	/* зеленый */
}
.red {
	color: #f00;	/* красный */
}	 

Обрати, пожалуйста, внимание, что порядок следования классов в HTML роли абсолютно не играет. Что class="red green", что class="green red" — без разницы. Победитель определяется только на основе порядка в CSS!

Итоговый каскад

Чтобы ты окончательно все понял, давай сведем все полученные сведения в строгий список определения правила-победителя. Итак, при отображении элемента браузер должен:

1. Найти все правила, селектор которых подходит для выбора данного элемента.
2. Разделить все объявления из найденных правил на группы согласно важности и источника:
   1. важные объявления читателя;
   2. важные объявления автора;
   3. обычные объявления автора;
   4. обычные объявления читателя;
   5. объявления агента пользователя.
3. В пределах групп провести сортировку объявлений по специфичности.
4. Для равных специфичностей отсортировать по очередности расположения.

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

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

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