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