6.4. Каскадирование

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

• Автор. Автор определяет стилевые таблицы для документа-источника в соответствии с условиями языка документа. Например, в HTML стилевые таблицы могут включаться в документ или связываться извне.
• Пользователь. Пользователь может быть способен определять стилевую информацию для частного документа. Например, пользователь может определить файл, который содержит стилевую таблицу, или устройство вывода может предоставить интерфейс, который генерирует пользовательскую стилевую таблицу (или поведение, как это сделать).
• Устройство вывода. Согласующиеся устройства вывода должны применять стилевую таблицу, определенную по умолчанию, до всех других стилевых таблиц документа. Стилевой таблице по умолчанию для устройства вывода следует представлять элементы языка документа способом, который удовлетворяет общие ожидания для презентации языка документа (например, для визуальных браузеров, элемент ЕМ в HTML представлен курсивом). Смотрите раздел "Простая стилевая таблица для HTML 4.0", касающийся рекомендуемой стилевой таблицы по умолчанию для документов HTML 4.0.

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

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

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

По умолчанию правила в авторских стилевых таблицах имеют больший приоритет, чем правила в пользовательской стилевой таблице. Приоритет меняется для правил "!important". Все правила, авторские и пользовательские, имеют больший приоритет, чем стилевая таблица устройства вывода по умолчанию.

Импортированная стилевая таблица тоже каскадируется и ее приоритет зависит от порядка импортирования. Правила, определенные в данной стилевой таблице, подменяют правила, импортированные из других стилевых таблиц. Импортированные стилевые таблицы могут сами импортировать или подменять другие стилевые таблицы рекурсивно, где применяется те же приоритетные правила.

6.4.1. Порядок каскадирования.

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

1. Находятся все объявления, которые применяются для данных элемента и свойства в целевом типе медиа-устройства. Объявления применяются, если связанный селектор согласуется с данным элементом.
2. Первичная сортировка для объявлений осуществляется по приоритету и происхождению: для нормальных объявлений авторские стилевые таблицы подменяют пользовательские стилевые таблицы, которые имеют приоритет над стилевой таблицей по умолчанию. Для объявлений "!important" пользовательские стилевые таблицы подменяют авторские стилевые таблицы, которые имеют приоритет над стилевыми таблицами по умолчанию. Объявление "!important" подменяют нормальные декларации. Импортированные стилевые таблицы имеют то же происхождение, как и стилевая таблица, которая импортировала ее.
3. Вторая сортировка осуществляется по специфичности селектора: более специфичные селекторы будут подменять более общие селекторы. Псевдо-элементы и псевдо-классы учитываются, как нормальные элементы и классы, соответственно.
4. В заключении, осуществляется сортировка по определенному порядку: если два правила имеет одинаковый приоритет, происхождение и специфичность, то последнее из двух определяет победителя. Правила в импортированных стилевых таблицах рассматриваются как предшествующие любым другим правилам в самой стилевой таблице.

За исключением установок "!important" в индивидуальных объявлениях, эта стратегия предоставляет авторским стилевым таблицам наивысший приоритет, чем таблицы читателя. Поэтому, важно, чтобы устройство вывода давало пользователю возможность отключить влияние определенной стилевой таблицы, например, через разворачиваемое меню.

6.4.2. Правила !important.

CSS пытаются создать баланс значений между авторскими и пользовательскими стилевыми таблицами. По умолчанию, правила в авторской стилевой таблице имеют приоритет над пользовательской (смотрите правило каскадирования 3).

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

Обратите внимание. Это – семантическое изменение после CSS1. В CSS1 авторские правила "!important" имели преимущество над пользовательскими правилами "!important".

Декларация сокращенного свойства (например, 'background'), как "!important", является эквивалентной объявлению всех соответствующих подсвойств, как "!important".

Первое правило в пользовательской стилевой таблице в следующем примере содержит объявление "!important", которое подменяет соответствующую декларацию в авторской стилевой таблице. Второе объявление будет тоже побеждать из-за маркировки "!important". Однако, третье правило в пользовательской стилевой таблице не является "!important", и поэтому будет подчиняться второму правилу авторской стилевой таблицы (которая применена для установки стиля сокращенного свойства). Кроме этого, третье авторское правило будет уступать второму авторскому правилу, поскольку второе правило - "!important". Видно, что объявления "!important" тоже имеют значение внутри авторских стилевых таблиц.

/* From the user's style sheet */
P { text-indent: 1em ! important }
P { font-style: italic ! important }
P { font-size: 18pt }

/* From the author's style sheet */
P { text-indent: 1.5em !important }
P { font: 12pt sans-serif !important }
P { font-size: 24pt }

6.4.3. Расчет специфичности селектора.

Специфичность селектора рассчитывается следующим образом:

• подсчитывается число атрибутов ID в селекторе (=а)
• подсчитывается число других атрибутов и псевдо-классов в селекторе (=b)
• подсчитывается число имен элементов в селекторе (=с)
• игнорируются псевдо-элементы.

Конкатенация трех чисел а-b-c (в системе счисления с большим основанием) предоставляют специфичность.

Некоторые примеры:

*             {}  /* a=0 b=0 c=0 -> specificity =   0 */
LI            {}  /* a=0 b=0 c=1 -> specificity =   1 */
UL LI         {}  /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI      {}  /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]{}  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red  {}  /* a=0 b=1 c=3 -> specificity =  13 */ 
LI.red.level  {}  /* a=0 b=2 c=1 -> specificity =  21 */
#x34y         {}  /* a=1 b=0 c=0 -> specificity = 100 */

В HTML значения атрибута "style" элемента являются правилами стилевой таблицы. Эти правила не имеют селекторов, но исходя из шага 3 каскадного алгоритма, они, рассматриваются, как имеющие селектор ID (специфичность: a=1, b=0, c=0). На основании шага 4, они, рассматриваются, как идущие после всех других правил.

<HEAD>
<STYLE type="text/css">
  #x97z { color: blue }
</STYLE>
</HEAD>
<BODY>
<P ID=x97z style="color: red">
</BODY>

В приведенном выше примере цвет элемента Р будет красным. Хотя специфичность является одинаковой для обоих объявлений, декларация в атрибуте "style" будет подменять декларацию в элементе STYLE из-за каскадного правила 4.

6.4.4. Предшествование нестилистических рекомендаций по презентации.

Устройство вывода может выбрать указание на приоритет для презентации из других источников, не являющихся стилевыми таблицами, например, элемент FONT или атрибут "align" в HTML. Если это так, то рекомендации по презентации (не CSS) должны транслироваться для соответствующих правил CSS со специфичностью равной нулю. Правила, как допускается, появляются в начале авторской стилевой таблицы и могут преодолевать последующие правила стилевой таблицы.

Обратите внимание. На переходном этапе эта политика облегчает действие стилистических атрибутов при совместном существовании со стилевыми таблицами.

Обратите внимание. В CSS1, рекомендации для презентации (не CSS) даются со специфичностью равной 1, а не 0. Это изменение появляется из-за введения универсального селектора, который имеет специфичность 0.