В современных, «комфортных» браузерах предусмотрена возможность в некоторой степени управлять оформлением просматриваемых веб-страниц. Речь идёт не только о масштабировании страницы или увеличении размера шрифта, но и о возможности пользователя применять собственные стили к просматриваемым страницам в Интернете. Но какую роль играет CSS-правило «!important»? И для чего оно может пригодиться разработчику? Забавно, но не все разработчики понимают схему, по которой браузеры работают с CSS. Поэтому я рассмотрю её на примере этой страницы.
Три источника
Казалось бы, всё предельно просто: страница загрузилась и браузер применил к ней таблицу стилей, путь к которой указан через тег LINK. Разумеется, таблица стилей появилась не сама по себе, а её создал я. Таким образом, через таблицу стилей я «сообщаю» браузерам написанные мною правила: каким образом нужно отображать различные элементы на странице, какой в них использовать шрифт, цвет, нужно ли подчёркивать ссылки и т. д. Я — разработчик — один из источников CSS.
Откуда ещё браузер «черпает» CSS? Второй источник CSS — это пользователь! Или другими словами, посетитель сайта.
Не все знают, но браузеру можно задать информацию о стиле просматриваемых страниц и они будут оформлены с учётом этих требований. Если шрифт на сайте мне кажется мелким, я могу указать браузеру свою таблицу стилей, созданную мной или кем-то для меня, в которой будет указан намного больший шрифт. То же самое может сделать любой другой посетитель сайта, например, у кого очень плохое зрение.
Наконец, ещё один источник — это сам браузер. В нём есть таблица стилей по умолчанию, которую браузер использует, пока не применит таблицу разработчика и пользователя (если она выбрана). Таблица «по умолчанию» указывает браузеру на то, как отображать страницу, пока он не успел применить другие CSS-таблицы. Для показательного примера, в браузерах Opera и FireFox можно посмотреть, как это выглядит, принудительно указав браузеру работать с default-стилями. В первом случае это Вид — Стиль страницы — Без стиля, во втором Вид — Стиль — Режим пользователя.
А теперь о главном — правило !important
Правило преимущества могут объявлять как разработчики, так и пользователи. Пример:
body {font-size: 120% !important;}В примере объявлен размер шрифта 120%. Согласно спецификации CSS, правило !important «наделяется преимуществом перед обычным объявлением» (цитата). Вот здесь и нужно вспомнить об источниках CSS, так как объявлять преимущество могут как разработчики, так и пользователи. При таком раскладе возможны следующие варианты:
1. Ни разработчик, ни пользователь не объявили правило !important.
В этом случае правила таблицы разработчика будут иметь приоритет над правилами таблицы пользователя.
body {/*таблица разработчика*/ font-size: 100%;}
body {/*таблица пользователя*/ font-size: 120%;}Размер шрифта на странице будет 100%.
2. Пользователь объявил правило преимущества, а разработчик — нет.
body {/*таблица разработчика*/ font-size: 100%;}
body {/*таблица пользователя*/ font-size: 120% !important;}Размер шрифта на странице будет 120%.
3. Разработчик и пользователь оба объявили правило преимущества.
body {/*таблица разработчика*/ font-size: 100% !important;}
body {/*таблица пользователя*/ font-size: 120% !important;}Внимание! Пользовательское правило преимущества имеет приоритет над правилом преимущества разработчика! Таким образом, размер шрифта на странице будет 120%. В спецификации CSS1 было всё наоборот, т. е. размер шрифта был бы задан как 100%.
4. Правило !important объявил только разработчик.
body {/*таблица разработчика*/ font-size: 100% !important;}
body {/*таблица пользователя*/ font-size: 120%;}Размер шрифта на странице будет 100%.
Чем правило !important помогает разработчикам?
Начну с того, что Internet Explorer включительно до 6-ой версии не понимает это правило. Если честно, то лично я рад, так как это идёт на пользу. В чём она заключается?
После выхода Internet Explorer 7 мне стало очевидно то, что разработчики наконец-то начали исправлять свой, мягко говоря, глупый браузер. Так сказать, подтянулся к остальным современным браузерам. Представляете, 7-ой Internet Explorer теперь понимает такие CSS-свойства, как fixed и min-width, правильно работает со свойством height и ещё научился обрабатывать в верном направлении некоторые другие свойства. О, Эврика!
А теперь к делу. Пример:
body {font-size: 120% !important;font-size: 100%;}Результат в Internet Explorer 6-ой версии и меньше будет 100%, так как он «пропустит» свойство !important и пересчитает значение заново. Остальные современные браузеры, в том числе и Internet Explorer 7, отдадут преимущество первому значению 120%.
Разумеется, этот пример представлен только в показательных целях, так как на самом деле шрифт в браузерах должен быть одинаковым. В моей практике чаще всего это правило используется в том случае, когда необходимо задать высоту блока во всю высоту страницы. Я использую такой код:
#block {min-height: 100%; /*«Нормальные» современные браузеры*/
height: auto !important; /*«Нормальные» современные браузеры*/
height: 100%; /*Internet Explorer 6 и меньше*/}Internet Explorer неправильно понимает свойство height. Если блоку задать значение «height: 200px», но информация внутри него будет требовать больше места, то блок автоматически «вырастет». Я рад хотя бы тому, что разработчики IE приняли решение увеличивать блок в высоту, а не в ширину!!!
Автор: Никита Мосияш.
Комментарии:
keep, 20.08.07 10:08
Думаю important - слишком серьёзная мера для переопределения стилей разработчиками. Гораздо удобнее и понятнее использовать разумные комбинации id+class. При использовании правила !important код становится менее понятен. Более того появляются тонкости, связанные с несколькими наложениями !important на одно и то же свойство. Сложнее понять как сработают стили например здесь:
html:
<div id=”accentify”>
<div id=”content”>
</div>
</div>
css:
#content {height: 200px; width:200px; background:#abc;}
div#content{background: #123; position:relative !important; top: 100px; left: 100px;}
#accentify #content{position:static;}
#accentify div#content{top: 300px; position: static !important;}
keep, 20.08.07 10:08
прикольно было бы редактировать свои записи.
Никита Мосияш, 20.08.07 11:08
В твоём коде и без !important трудновато на глаз разобраться :) В частности, мне непонятно, зачем ты для статического блока указываешь top: 300px и position: static !important? Безусловно, если правило !important сбивает с толку, например, при нескольких на одно свойство, то я бы предпочёт воспользоваться другим методом, более наглядным. Последний пример в статье - определение высоты блока во всю страницу. Как бы поступил ты?
keep, 20.08.07 12:08
Этот «непонятный» код писался специально. Очень часто встречаются ситуации с «наложениями» правил. А именно, если для одного элемента определены правила в нескольких местах. Тогда в действие вступает приоритетность написанных правил css + !important.
В определении блока !important — хак для IE6. Хороший тон: выносить все хаки в отдельные файлы и подключать к IE через условные комментарии. На РИТ-2007 pepelsbey об этом хорошо рассказал. Его видео:
https://seoded.blogspot.com/2007/08/css-live.html
Более подробно о наследовании правил можно почитать в спеке:
https://www.w3.org/TR/CSS21/cascade.html#cascade
Neutrino, 20.08.07 08:08
Я с помощью !important иногда “перебиваю” свойства, заданные мной же ранее и не поддающиеся к изменению через простое переопределение.
Никита Мосияш, 20.08.07 09:08
Keep, я с тобой согласен, я сам выношу хаки в отдельные файлы. Если IE дурак, то пусть с хаками работает только он… Но я чаще выношу хаки типа expression().
DM, 27.10.07 05:10
“Разумеется, этот пример представлен только в показательных целях, так как на самом деле шрифт в браузерах быть одинаковым.”
Что-то быть одинаковым ни с чем не согласовано.
Настоятельно прошу - как пользователь - приделать исчезание изначального текста-подсказки в полях формы при тыке туда мышью.
Octane, 10.02.08 01:02
Приведу пример где !important будет незаменим, например вы делаете сайт какомуто дядичке, который знает старые дедовские методы HTML оформления (font, align, center и т.д.) и ничего слышать не хочет о какой-то там семантике и доктайпе типа xhtml 1.0 strict, но будет иметь возможность использовать HTML при редактировании текстового наполнения сайта, ряд проблем с использованием устаревших html тегов и их параметров можно решить добавлением в CSS сайта следующих стилей:
*[align], *[valign],
*[hspace], *[vspace],
*[width], *[height],
*[text], *[link], *[alink], *[vlink],
*[bgcolor], *[background], *[bgproperties],
*[topmargin], *[rightmargin], *[bottommargin], *[leftmargin], *[marginwidth], *[marginheight],
*[border],
*[nowrap],
*[noshade],
table[cellpadding], table[cellspacing], table[cols], td[colspan], td[rowspan],
ul[type],
br[clear],
a[target],
img:not([alt]),
ol,
hr,
tt,
font,
center,
iframe,
embed,
body > a, form > input, form > select, p p, p div, p h1, p h2, p h3, p h4, p h5, p h6 {
border: 5px solid #c33 !important;
}
таким образом мы задаем, независимо от того какое оформление имеют выше перечисленные теги, красную рамку шириной 5 пикселей вокруг этих элементов, не заметить которую просто невозможно) огорчает что не все конструкции будут работать в старых браузерах, но заставить заказчика работать с сайтом в новом браузере куда проще, чем начать изучать особенности семантической верстки и правил языка xhtml или объяснить что таблицы не применяются для разметки страниц…
Octane, 10.02.08 01:02
Да забыл сказать, этот список далеко не полный я только набросал что помню…