Каскад в CSS
Дата публикации: 21.07.2011
Предыдущая статья Наследование в CSS.
Из предыдущих статей ты уже знаешь, что когда несколько правили (или объявлений) подходят для одного элемента, правилом-победителем считается то, у которого больше специфичность.
Знаешь и то, что победителем можно назначить и более слабое (по специфичности) правило, используя директиву !important.
Возникает естественный вопрос: а что, если специфичности одинаковы?
В принципе, могут возникнуть и другие спорные ситуации. Например, если используется сразу несколько таблиц стилей (таблицы автора, читателя, браузера).
Все эти моменты разрешает каскад — процесс, с помощью которого упорядочиваются конфликтующие объявления. Давай посмотрим, как это делается.
Сортировка по источнику
Фактически, существует три возможных источника CSS-правил: стили автора, стили читателя, стили браузера.
Перечисляю в порядке убывания приоритета:
- Стили автора — это тот CSS, который пишешь ты, когда делаешь страничку. Самый высокий приоритет.
- Стили читателя — CSS который создают под себя некоторые особо продвинутые пользователи. Однако, это бывает крайне редко.
- Cтили браузера — настройки-по умолчанию. Самый низкий приоритет. При граммотно составленом CSS у них практически нет шансов выиграть.
Сортировка по важности
Фактически все правила разделяются на группы — !important и обычные. И далее сортируются только в пределах своей группы. Это как будто козыря сравниваются только с козырями, а обычные карты — с обычными. Козырная шестерка бъет любого простого туза. Точно так и тут: правила, отмеченные, как !important всегда получат более высокий приоритет.
Чтобы окончательно нас запутать, сортировку по важности смешали с сортировкой по источнику. Логика такая: если читатель в своей таблице отметил правило, как !important, то значит ему очень нужен этот стиль! И даже авторский !important не должен перебить такое правило. Ведь пользователь точно знает, как ему удобнее! В конечном счете страница делается для посетителей, а не для разработчика.
В свете всего сказанного привожу список приоритетов с учетом как источника, так и важности (опять от сильных к слабым):
- важные объявления читателя;
- важные объявления автора;
- обычные объявления автора;
- обычные объявления читателя;
- объявления агента пользователя;
Сортировка по специфичности
Это ты уже знаешь. Правила, находящиеся в одной группе сравниваются по своми специфичностям. У кого больше — тот и молодец!
Сортировка по порядку расположения
Наконец, если важность, источник и специфичность правил совпадает, победителем считается правило, расположенное в таблице позже (ниже по тексту).
Таким образом, порядок в CSS имеет значение! В приведенном ниже примере победит второе правило и цвет будет красный.
<div class="red green">Зеленый или красный?</div>
.green { color: #0f0; /* зеленый */ } .red { color: #f00; /* красный */ }
Обрати, пожалуйста, внимание, что порядок следования классов в HTML роли абсолютно не играет. Что class=»red green», что class=»green red» — без разницы. Победитель определяется только на основе порядка в CSS!
Итоговый каскад
Чтобы ты окончательно все понял, давай сведем все полученные сведения в строгий список определения правила-победителя. Итак, при отображении элемента браузер должен:
- Найти все правила, селектор которых подходит для выбора данного элемента.
- Разделить все объявления из найденных правил на группы согласно важности и источника:
- важные объявления читателя;
- важные объявления автора;
- обычные объявления автора;
- обычные объявления читателя;
- объявления агента пользователя.
- В пределах групп провести сортировку объявлений по специфичности.
- Для равных специфичностей отсортировать по очередности расположения.
После этого остается только выбрать победившие объявления и сформировать из них правило, применяющееся к данному конкретному элементу.
Вот собственно и все. Теперь, надеюсь, для тебя уже не осталось загадок в механизме наследования. И слово «каскадные» в фразе «Каскадные таблицы стилей» никогда больше не поставит тебя в тупик.
Вооруживщись такими мощными знаниями можно следовать далее по дороге, ведущей тебя к вершинам мастерства в CSS.