Рубрика CSS
Декларация !important в CSS
Декларация !important была валидна начиная с CSS1, но она, похоже, приобрела плохую репутацию за эти годы. Хотя если ее использовать с осторожностью, то это будет полезным и мощным инструментом, который заслуживает свое место в мире CSS. Данная статья предлагает руководство по тому, как работает декларация и как ее использовать.
Как использовать?
Декларация !important – это ключевое слово, которое может быть добавлено в конце любого свойства/значения CSS. Например:
p {margin-left: 5px !important}
или
p {margin: 10px 5px 0 10px !important}Каково ее влияние?
CSS присваивает вес для каждого правила в зависимости от специфики выбора и позиции в источнике. Это определяет, какой стиль применяется к элементу HTML.
Если появляются два конфликтующих правила, то для решения проблемы применяются следующие принципы:
- Источник правил – если таблица стилей сайта конфликтует с пользовательской таблицей стилей, то приоритетными будут правила пользовательской таблицы стилей.
- Специфика - когда два или более правил относятся к одному и тому же элементу, устанавливают то же самое свойство и имеют ту же самую важность и один источник, то будет применено правило определенного селектора.
- Порядок – если у двух правил один и тот же вес, будет применяться последнее правило, объявленное в таблице стилей.
Иногда необходимо поменять приоритет правил. Сделать это можно при помощи декларации !important в CSS. Если декларация !important используется в каком-либо свойстве/значении, то это значение становится самым важным для того свойства и отменяет любые другие.
В этом примере второй селектор является более определенным и находится в конце, но первое правило будет иметь приоритет, потому что декларация !important отменяет любое другое значение, которое установлено для этого элемента.
p {margin-left: 5px !important}
#id p {margin-left: 10px}В сокращенном варианте это выглядит так:
p {margin: 10px 5px 0 10px !important}То же самое по каждому свойству в отдельности:
p {
margin-top: 10px !important;
margin-right: 5px !important;
margin-bottom: 0 !important;
margin-left: 10px !important
}Когда необходимо использовать !important?
Вот несколько примеров использования декларации !important:
IE 5/6
Internet Explorer 5 и 6 версии игнорируют декларацию !important, если одно и то же свойство объявлено дважды.
p {margin-left: 5px !important;
margin-left:10px}Internet Explorer 5 и 6 применят значение 10px к каждому параграфу, в то время как все другие браузеры применят значение 5px.
Замена inline-стилей
Декларация !important может использоваться для переопределения inline-стилей, динамически сгенерированные WYSIWYG-редакторами в CMS.
Форматирование текста редактором WYSIWYG осуществляется с помощью вставленных в код HTML стилей. Но эти inline-стили могут быть изменены при помощи декларации !important.
Например, пользователь хочет вывести строку текста красным цветом:
<div id="content"><p style="color:red">Some text</p></div>Но автор сайта может переопределить этот стиль, чтобы текст во всех параграфах выводился в черный цвет.
#content p {color:black !important}Стилевые файлы для печати
Декларация !important может также использоваться в таблицах стилей для печати, чтобы удостовериться, что стили будут применены и не отменены каким-либо другим правилом.
Минусы
Единственный способ переопределить декларацию !important – это использование более конкретной декларации !important. Все это делает таблицу стилей более запутанной и трудной для понимания.
Полезно знать
В CSS1 декларация !important в таблице стилей автора имела приоритет над таблицей стилей пользователя. Этот порядок был отменен в CSS2, то есть пользователь всегда может переопределить стиль автора, если захочет.
Заключение
Использование декларации !important может сделать файл стилей сложным в понимании, но если ее использовать рационально, то можно сохранить больше времени и сил.
