!important
Розділювач !, після якого стоїть ключове слово important, позначає оголошення як важливе. Позначка !important змінює правила вибору оголошень у межах каскаду. Оголошення, яке не є важливим, зветься звичайним.
Аби позначити оголошення як важливе, слід додати після значення в оголошенні позначку важливості (!important). Попри те, що між розділювачем і ключовим словом дозволений пробіл, зазвичай ця позначка пишеться як !important, без жодних пробілів.
selector {
property: value; /* normal звичайне оголошення */
property: value !important; /* важливе оголошення (бажано писати так) */
property: value ! important; /* важливе оголошення (бажано так не писати) */
}
Позначка !important ставиться після значення в оголошенні пари властивості та значення, відділена щонайменше одним пробілом. Позначка важливості має бути останньою лексемою в такому оголошенні. Інакше кажучи, між позначкою та крапкою з комою в кінці оголошення можуть бути пробіли та коментарі, але нічого іншого.
Вплив на каскад
Коли мова про важливі оголошення, то порядок каскадних походжень і шарів стає оберненим. Коли позначки важливості немає, то оголошення в списках стилів розробника переважують оголошення в користувацьких стилях, які переважують оголошення в усталених стилях користувацького агента.
Коли ж оголошення є важливим, то цей порядок стає оберненим. Оголошення, позначені як важливі в стилях користувацького агента, переважають всі важливі оголошення в стилях користувача. Так само, всі важливі оголошення в стилях користувача переважають всі важливі оголошення в стилях розробника. Нарешті, всі важливі оголошення мають пріоритет над усіма анімаціями.
[!NOTE] Всі важливі оголошення мають пріоритет над усіма анімаціями. Позначка
!importantне є дійсною в межах оголошень анімацій @keyframes.
Обернення порядку пріоритету для важливих оголошень забезпечує те, що користувачі з особливими потребами, наприклад, особливими колірними палітрами чи великим шрифтом, здатні переважити стилі розробника, позначивши деякі оголошення у своїх стилях користувача як важливі. Також це гарантує те, що зловмисні розширення не можуть переважити важливі стилі користувацького агента, що могло б зламати функціональність або негативно вплинути на безпеку.
Чи має щось пріоритет над важливими оголошеннями? Так, це переходи. Переходи CSS є способом контролю швидкості, з якою властивість змінює одне значення на інше. Поки відбувається перехід від одного значення до іншого, властивість не відповідатиме якомусь конкретному важливому оголошенню.
a {
color: red !important;
background-color: yellow;
transition: all 2s linear;
}
a:hover {
color: blue !important;
background-color: orange !important;
}
У цьому прикладі властивості color і background-color будуть переходити до стану наведеності протягом двох секунд. Навіть попри те, що усталені стани є звичайними оголошеннями, а стани наведеності – оголошеннями !important, перехід усе одно відбувається.
Каскадні шари
В межах кожного з трьох походжень списків стилів – розробника, користувача та користувацького агента – звичайні оголошення в нешарових стилях переважають шарові оголошення стилів, причому останнє оголошення має пріоритет над шарами, що оголошені перед ним. Важливі оголошення обертають порядок пріоритету: важливі оголошення в першому шарі мають пріоритет над важливими оголошеннями в наступному шарі, і так далі. Крім цього, всі важливі оголошення в шарах мають пріоритет над важливими оголошеннями, що зроблені поза будь-яким шаром.
Вбудовані стилі
Вбудовані стилі – це стилі, визначені за допомогою атрибутів style. Вони також можуть бути звичайними або важливими. Вбудовані звичайні стилі переважають усі звичайні оголошення, незалежно від походження. Вбудовані важливі стилі переважають усі інші важливі стилі розробника, незалежно від шару, але важливі стилі зі стилів користувача або користувацького агента та переходи переважають їх.
!important і специфічність
Попри те, що !important не є частиною алгоритму визначення специфічності, ці позначка та алгоритм пов'язані одне з одним. Важливі оголошення переважують усі інші оголошення з тих самих походження та каскадного шару.
#myElement#myElement#myElement .myClass.myClass p:hover {
color: blue;
}
p {
color: red !important;
}
Цей приклад демонструє ситуацію надмірної специфічності селектора. Незалежно від того, наскільки висока специфічність селектора звичайного оголошення, важливе оголошення з тих же джерела та каскадного шару завжди матиме пріоритет. У цьому випадку абзац завжди буде червоним.
Коли два важливі оголошення з одних походження та шару застосовуються до одного елемента, то браузери вибирають і застосовують те з ним, що має вищу специфічність.
#myElement p {
color: green !important;
}
p {
color: purple !important;
}
У цьому випадку специфічність селектора грає роль. Порядок грав би роль лише якби ці селектори мали однакову специфічність.
Вплив на властивості-скорочення
Оголошення властивості-скорочення з !important робить усі її підвластивості важливими. Два наступні блоки стилів селектора еквівалентні:
p {
background: blue !important;
}
p {
background-image: none !important;
background-position: 0 0 !important;
background-size: auto auto !important;
background-repeat: repeat !important;
background-origin: padding-box !important;
background-clip: border-box !important;
background-attachment: scroll !important;
background-color: blue !important;
}
Цей приклад демонструє одну з кількох причин, чому зазвичай рекомендують уникати позначок важливості.
Вплив на кастомні властивості
Коли позначка !important додається до оголошення значення кастомної властивості, це робить присвоєння значення важливим. Потім позначка !important вилучається зі значення кастомної властивості. Позначка !important не передається до функції var() як частина значення кастомної властивості.
:root {
--myColor: red !important;
--myColor: blue;
}
p {
color: var(--myColor);
}
blockquote {
color: var(--myColor);
color: purple;
}
У цьому прикладі абзац буде червоним, а не синім, оскільки присвоєння значення кастомної властивості є важливим. Blockquote буде фіолетовим, оскільки звичайне фіолетове оголошення стоїть нижче звичайного оголошення з червоним кольором.
Найкращі практики
Уникайте використання !important для переваження специфічності. Коли важливі оголошення свідомо створюються для виконання вимог з UI, додавайте до свого коду CSS коментарі для пояснення тим, хто буде підтримувати код, чому вони не повинні переважувати якусь можливість.
Навіть при роботі з переважування стилів з високою специфічністю, над якими немає контролю, наприклад, стилів у сторонній втулці, що мають селектор ідентифікатора, немає потреби використовувати !important. Розгляньте можливість імпортування стилю сторонньої втулки в іменований або безіменний шар як перший каскадний шар, а не використовувати !important. Якщо зовнішні стилі не містять важливих оголошень, ваші стилі переважатимуть стилі віджета, незалежно від специфічності.
Якщо потрібно переважити зовнішній список стилів, що містить важливі оголошення, створіть каскадний шар, що вміщає усі необхідні переважання, і оголосіть цей шар першим.
Занепокоєння щодо доступності
Важливі стилі з користувацького списку стилів мають пріоритет над важливими оголошеннями стилів розробника, а це означає, що додавання позначки !important до стилів сайту не завадить окремим користувачам з особливими потребами, наприклад, з великими шрифтами, переважати ваші стилі, додавши важливі стилі у свій власний список стилів користувача.
Сумісність із браузерами
Ця можливість підтримується у всіх браузерах.