Каскадування і специфічність в CSS

Навіть при нескладній таблиці стилів, ймовірність того, що кілька правил будуть застосовуватися до одного і того ж елементу, дуже висока. Специфікація CSS вирішує цей конфлікт за допомогою правил каскадування. Каскадування засноване на присвоєнні деякого пріоритету кожному правилу. Найбільшим пріоритетом володіють авторські таблиці стилів, меншим - користувацькі, а найнижчим - таблиці стилів за замовчуванням - браузер або пристрій користувача.

Користувач може перевизначити авторське правило, встановивши для свого правила прапорець !important.

Правила каскадування визначають наступні пріоритети:

- користувацькі стилі, відмічені прапорцем !important;

- авторські стилі, відмічені прапорцем !important;

- авторські стилі;

- користувацькі стилі;

- стилі за замовчуванням браузера або пристрою користувача.

Після каскадування правила упорядковуються на основі специфічності селекторів. Правила з більш специфічними селекторами перевизначають правила з менш специфічними селекторами. Якщо два правила мають однакову специфічність, пріоритет має правило, визначене останнім.

Специфічність

Для обчислення специфічності правил кожному типу селекторів присвоєно числове значення. Специфічність правила обчислюється шляхом підсумовування значень кожного його селектора. На жаль, специфічність обчислюється не в числовій системі з основою 10, а в системі з невизначено високою основою. Це зроблено для того, щоб високоспецифічні селектори, такі, як селектори ідентифікаторів, ніколи не переоприділялися великою кількістю низькоспецифічних селекторів, наприклад селекторами типів. Однак якщо селекторів менше 10, то для простоти можна обчислювати специфічність в числовій системі з основою 10.

Специфічність селектора розбивається на 4 рівня: a, b, c і d.

- Якщо стиль вбудований, "а" = 1;

- Значення "b" дорівнює загальній кількості селекторів ідентифікаторів;

- Значення "c" дорівнює кількості класів, псевдокласів і селекторів атрибутів;

- Значення "d" дорівнює кількості селекторів типів і псевдоелементів.

За допомогою цих правил можна обчислити специфічність будь-якого селектора CSS.

Прочитати детально про основні селектори можна зі попереднього запису Селектори в CSS. Для більшого розуміння коротко нагадаємо про дані селектори:

Вбудований селектор:
Style="font-weight: bold"

Селектор ідентифікатор:
#myElement{ font-weight: bold }

Селектор класів, псевдокласів і атрибутів.
.datePost{ font-weight: bold }
a:hover, a:active{ font-weight: bold }
abbr[title]{ font-weight: bold }

Наведено ряд селекторів з їх специфічністю та основою 10:
1. Style="" (1,0,0,0) - 1000
2. #wrapper #content{} (0,2,0,0) - 200
3. #content. datePosted{} (0,1,1,0) - 110
4. div#content{} (0,1,0,1) - 101
5. #content{} (0,1,0,0) - 100
6. p.comment. datePosted{} (0,0,2,1) - 21
7. p. comment{} (0,0,1,1) - 11
8. div р{} (0,0,0,2) - 2
9. р{} (0,0,0,1) - 1

На перший погляд система числення з невизначеною основою може здатися дивною, проте ніякої двозначності в цьому немає. Суттєво те, що правило, записане в атрибуті стилю, завжди буде більш специфічним, ніж будь-яке інше правило. Правило з ідентифікатором завжди більш специфічне, ніж правило без ідентифікатора. Правило з селектором класу більш специфічне, ніж з селекторами типів. І нарешті, якщо два правила мають однакову специфічність, пріоритет має правило, визначене останнім.

Використання специфічності в таблицях стилів

При створенні таблиць CSS специфічність корисна тим, що вона дозволяє задати загальні стилі для звичайних елементів, потім перевизначити стилі для специфічних елементів. Припустимо, ви хочете, щоб більшість форм сайту мали ширину 30px, проте декілька пошукових форм повинні мати ширину 15px. Для цього необхідно визначити наступні правила:
form{ width : З0px }
form#search{ width : 15px }

Після цього при створенні кожної нової форми не потрібно турбуватися про зміну значень в таблиці CSS: таблиця сама правильно стилізує форми. Однак, на особливо великих сайтах ви виявите, що просте правило розмивається все більшою кількістю винятків. Можливо, для сайту знадобиться реєстраційна форма, що має ширину 20px. Можливо, знадобиться особливо велика форма програми шириною 40px, кожен раз при створенні більш специфічного стилю вам, швидше за все, доведеться перевизначати деякі із загальних правил.

Розміри коду почнуть збільшуватися лавиноподібно. Код може стати досить складним, особливо якщо один елемент буде витягувати стилі з різних місць таблиці стилів.

Щоб уникнути плутанини, ми намагаємося робити загальні стилі якомога більш загальними, а специфічні - якомога більш специфічними, припускаючи, що останні не будуть перевизначатися ніколи. Якщо виявляється, що загальний стиль потрібно перевизначити кілька разів, то краще видалити із загального правила оголошення, що вимагає багаторазового перевизначення, і застосувати правило явно до кожного елементу, в якому воно необхідне.

Додавання класу або ідентифікатора до дескриптора body

Цікавий спосіб використання специфічності полягає в застосуванні класу або ідентифікатора до дескриптора "body". Ви можете таким чином перевизначати стилі на різних сторінках. Припустимо, потрібно, щоб структура початкової сторінки відрізнялася від структури інших сторінок сайту. Для цього ви можете додати ім'я класу в елемент "body" початкової сторінки і застосувати його для перевизначення стилів.
#content{ float: left }
.homepage #content{ float: right }
#nav{ float: right }
.homepage #nav{ float: left }

Додаючи ідентифікатори на кожну сторінку сайту, ви можете надати користувачам можливість перевизначати ваші таблиці стилів їх власними.

Ідентифікатори, що відносяться до всього сайту, іноді називають "сигнатурою CSS". В якості сигнатури CSS прийнято використовувати імена приблизно такого вигляду: id="www-site-соm". Припустимо, користувач захоче перевизначити розмір шрифту або кольорову схему, щоб сайт було легше читати. Він може зробити це, додавши в свою таблицю стилів наступне правило:
body#www-site-com{ font-size: 200%; color: white }

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

Спадкування

Іноді люди плутають спадкування з каскадуванням. На перший погляд ці дві концепції тісно пов'язані, однак фактично це зовсім різні поняття. На щастя, зрозуміти спадкування значно легше, ніж каскадування. Властивості елемента, якому присвоєно певний стиль, успадковуються його нащадками (тобто елементами, вкладеними в нього). Наприклад, якщо привласнити елементу "body" чорний колір тексту, всі нащадки елемента "body" виводитимуть текст чорним кольором (якщо їх властивості не перевизначені). Те ж справедливо і для розміру шрифту. Якщо привласнити елементу body розмір шрифту 14 пікселів, всі елементи сторінки повинні успадкувати цей розмір.

Якщо встановити розмір шрифту для дескриптора "body", стиль не буде присвоєно заголовкам сторінки, хоча елементи заголовків "H" є нащадками елемента "body". Ви можете припустити, що заголовки не успадкують розмір шрифту. Однак це не так.

Справа в тому, що браузер присвоює заголовкам таблицю стилів за замовчуванням, а стиль, присвоєний безпосередньо елементу, завжди перевизначає успадкований стиль. Успадкований стиль має нульову специфічність.

Спадкування вельми корисно тим, що дозволяє уникнути додавання одних і тих же стилів всім нащадкам елемента. Якщо властивість, яку потрібно призначити для елемента, може бути успадковано, її можна застосувати до батьківського елементу. Зрештою, навіщо писати:
р, div, h1, h2, h3, ul, li{ color: #000 }

Адже можна написати:
body{ color: #000 }

Як і каскадування, спадкування допомагає спростити таблиці CSS, а також скоротити кількість і знизити складність селекторів, присутніх в коді. Однак, якщо сторінка містить багато елементів, які успадковують різні стилі, з'ясувати, звідки "прийшов" стиль, що визначає деяку властивість елемента, іноді буває досить складно.
Залишати коментар дозволено лише зареєстрованим користувачам. Процедура займе зовсім небагато часу, і ви зможете швидко добавити відгук.

Авторизуватися

Вперше на KovelPost? Приєднуйтесь

Статистика: