CSS декларация !important.

Хотя декларация !important и является валидной, начиная с первой версии спецификации CSS, но особой популярностью она не пользуется из-за плохой репутации. Эта инструкция является достаточно мощным и полезным инструментом, используемым в веб-разработке, но ее нужно применять с осторожностью. Данную статью можно считать руководством по использованию декларации !important и ее применения на практике.

Синтаксис использования.

Инструкция !important представляет собой ключевое слово, которое добавляется после пары ключ: значение; необходимогоCSS свойства. Например:

div {margin-right: 20px !important;}
div {border: solid 2px black !important;}

Эффект от использования.

Такой вариант CSS кода задает приоритет определенному правилу в зависимости от его специфичности и позиции в исходнике, что в результате определяет стиль форматируемого HTML элемента. В том случае, если указаны несколько конфликтующих правил для одного элемента, то его стиль определяется согласно следующим принципам:

  • Учитывается источник правила. То есть в том случае, если одно правило определено в файле CSS, находящимся на стороне сервера, а другое на компьютере клиента, то приоритет будет у пользовательского определения правила.
  • Конкретность правил. Если несколько конфликтующих правил применяются к одному CSS свойству элемента и в то же время имеют один уровень приоритетности, так как принадлежат одному источнику, тогда будет применяться то правило, которое находится в рамках более конкретного селектора.
  • Порядок следования правил. Когда имеют место два равноправных, конфликтующих правила, то применяется правило, которое в исходном CSS коде расположено последним.

В некоторых случаях необходимо манипулировать приоритетностью CSS правил. Для того, чтобы нарушить каскадную последовательность форматирования элемента нужно применить ключевое слово !important. Когда вы используете эту декларацию применительно к определенному правилу (свойство: значение;), то именно это значение соответствующего свойства является наиболее «важным» и имеет самый большой приоритет над остальными возможными значениями данного CSS свойства. Следующий пример демонстрирует похожий случай. Здесь, хотя второе правило содержит более конкретный селектор и должно иметь приоритет над первым, элемент параграфа будет отформатирован согласно первому правилу, так как к нему применяется декларация !important:

p {border-width: 1px !important;}
#pID p {border-width: 2px;}

Если ключевое слово !important используется в комбинации с сокращенной формой записи определенного свойства, то оно имеет силу применительно ко всем дочерним вариантам указанного CSS свойства. Пример:

p {border: 1px solid grey;}
это то же самое, что задать значение для каждого дочернего свойства в отдельности:
p {
border-width: 1px;
border-style: solid;
border-color: grey;
}

В каких случаях необходимо применять !important?

Приведем список рекомендаций и нюансов, касающихся использования этой декларации:

  • Ограничение по использованию !important имеет место в ранних версиях IE 5 и 6. Если какое-либо свойство задано повторно, то это ключевое слово игнорируется:
    p {
    margin-left: 10px !important;
    margin-left: 20px;
    }

    В IE 5-6 отступ у элемента параграфа будет 20px, а остальные браузеры применят первое правило и отступ будет равен 10px.

  • Декларация !important может применяться для отмены значений inline-стилей, расположенных в HTML коде документа. Такой способ определения стилей может быть автоматически сгенерирован визуальными редакторами WYSIWYG, используемых в различных системах управления контентом (CMS). Пример:
    В исходном HTML коде документа описан элемент:
    <div id="container"><p style="color: green">Example text</p><div>
    Этот правило может быть переопределено следующей CSS инструкцией, с применением !important:
    #container p {
    color: black !important;
    }

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

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

Есть и неприятные моменты.

Переопределение уже существующего CSS правила, в котором используется !important возможно только путем указания более конкретизированного селектора с тем же правилом и требуемым значением, после которого также должна присутствовать декларация !important. Это усложняет CSS файл и делает его менее читабельным.

К вашему сведению

В первой версии спецификации CSS1 авторские стили, оформленные с использованием декларации !important имели приоритет над пользовательскими стилями. В следующей версии CSS2 этот подход был пересмотрен и пользователь может переопределить любое правило, указанное в авторских таблицах стилей.

Итоги

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *