CSS — !important
Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей, также применяется для повышения специфичности стилевого правила. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
- !important добавлен в авторский стиль — будет применяться стиль автора.
- !important добавлен в пользовательский стиль — будет применяться стиль пользователя.
- !important нет как в авторском стиле, так и стиле пользователя — будет применяться стиль автора.
- !important содержится в авторском стиле и стиле пользователя — будет применяться стиль пользователя.
Итог от применения !important в общем случае показан в табл. 1.
| Стиль автора | Стиль пользователя | Результат |
|---|---|---|
| BODY { color: silver;
| BODY { color: #000;
| Lorem ipsum dolor sit amet… Будет применяться стиль автора, а именно: |
| BODY { color: silver;
| BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… Цвет текста будет установлен пользовательским, |
| BODY { color: silver;
| BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… Будут использоваться все стилевые свойства пользователя. |
| BODY { color: silver !important; font-size: 8pt !important } | BODY { color: #000 !important;
| Lorem ipsum dolor sit amet… При добавлении !important в ту и другую таблицу |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
Синтаксис ?
Свойство: <значение> !important✖
Обозначения
| Описание | Пример | |
|---|---|---|
| <тип> | Указывает тип значения. | <размер> |
| A && B | Значения должны выводиться в указанном порядке. | <размер> && <цвет> |
| A | B | Указывает, что надо выбрать только одно значение из предложенных (A или B). | normal | small-caps |
| A || B | Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. | width || count |
| [ ] | Группирует значения. | [ crop || cross ] |
| * | Повторять ноль или больше раз. | [,<время>]* |
| + | Повторять один или больше раз. | <число>+ |
| ? | Указанный тип, слово или группа не является обязательным. | inset? |
| {A, B} | Повторять не менее A, но не более B раз. | <радиус>{1,4} |
| # | Повторять один или больше раз через запятую. | <время># |
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>important</title>
<style>
p {
background: url(images/tune1.png) no-repeat !important;
min-height: 112px; /* Минимальная высота */
padding-left: 65px; /* Поле слева от текста */
}
p {
background: url(images/tune2.png) no-repeat;
}
</style>
</head>
<body>
<p>Минорная пентатоника с пониженной V ступенью также называется блюзовой
пентатоникой.</p>
</body>
</html>
В данном примере для одного селектора задается одно и то же свойство с разными значениями. Но поскольку к первому селектору добавляется !important, то его стиль и будет применяться на странице.
Примечание
При добавлении !important к значению стилевого свойства его важность повышается. Если переопределить значение того же свойства без !important, оно будет игнорироваться браузерами. Но только не в Internet Explorer версии 6 и ниже.
Спецификация ?
✖Спецификация
Каждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации) — первая черновая версия стандарта.
Браузеры: Настольные Мобильные ?
| Internet Explorer | Chrome | Opera | Safari | Firefox | |
| 4 | 7 | 1 | 3.5 | 1 | 1 |
| Android | Firefox Mobile | Opera Mobile | Safari Mobile |
| 1 | 1 | 4 | 1 |
Браузеры
В таблице браузеров применяются следующие обозначения.
- — элемент полностью поддерживается браузером;
- — элемент браузером не воспринимается и игнорируется;
- — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.
Число указывает версию браузреа, начиная с которой элемент поддерживается.
Разное
Использование !important в CSS
Итак, почему же стоит отказаться от «!important»?Во-первых, этот параметр не поддерживает IE6. Во-вторых, в некоторых браузерах могут возникать конфликты с пользовательскими таблицами стилей. В-третьих, это лишний код, без которого, в большинстве случаев, можно обойтись.
Рассмотрим простой пример использования:
XHTML
<div> <p>Первый абзац</p> <p>Второй абзац</p> <p>Третий абзац</p> </div>
CSS
#content p {
color: #009;
}
.p1 {
color: #900;
}
.p2 {
color: #090 !important;
}Получилось, что цвет текста, описанный в классе «p1», не перекрыл значение цвета, заданное через идентификатор родительского контейнера «#content» для дочерних элементов «p». Это произошло, потому что приоритет стилей, заданных через идентификатор объекта, выше, чем приоритет класса. В случае с «p2» для параметра «color» задано значение «!important», что дает ему высший приоритет, поэтому мы видим в третьем абзаце текст зеленого цвета.
Представим, что нам требуется таким образом перекрыть много CSS-параметров, тогда получится что-то вроде этого:
#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
.p2 {
margin: 0 24px !important;
padding: 24px 0 !important;
color: #090 !important;
font-size: 12px !important;
line-height: 24px !important;
text-align: left !important;
}Довольно громоздко и некрасиво получилось, не так ли? Давайте подумаем, как обойтись без «!important». Мы знаем, что стили идентификатора перекрывают оформление класса, поэтому и запишем все через идентификатор «#content»:
#content p {
margin: 0 12px;
padding: 12px 0;
color: #009;
font-size: 14px;
line-height: 18px;
text-align: center;
}
#content .p2 {
margin: 0 24px;
padding: 24px 0;
color: #090;
font-size: 12px;
line-height: 24px;
text-align: left;
}Вот, то, что нужно, ни одного «!important» и все работает так, как и хотелось. Вернемся к нашему примеру и перепишем его без использования «!important»:
#content p {
color: #009;
}
.p1 {
color: #900;
}
#content .p2 {
color: #090;
}Результат тот же, что и в первом примере, но мы избавились от «!important», а значит избежали проблем, приведенных в начале статьи, да еще и сократили код, если требовалось бы перекрыть несколько параметров.
До момента написания статьи, я ни разу не встречал такого использования CSS-селекторов:
#identificator.class /* или */ .class#identificator
Как оказалось, применение такой конструкции есть. Допустим, у нас есть меню навигации:
<ul> <li><a href="index.html">Главная</a></li> <li><a href="projects.html">Проекты</a></li> <li><a href="partners.html">Партнеры</a></li> <li><a href="about.html">О нас</a></li> <li><a href="contacts.html">Контакты</a></li> </ul>
И по каким-то причинам, стили описаны следующим образом:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}Например, для того, чтобы выделить ссылку на текущую страницу, мы добавляем для нее класс «current», т. к. идентификатор уже задан, но теперь чтобы перекрыть значение параметра «background» нам потребуется использовать «!important»:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
.current {
background: #ff0 !important;
}Вроде бы «!important» не так и сильно мешает и запись довольно короткая, но вспомним, что IE6 не понимает его. Что же делать? Перепишем код, используя конструкцию, о которой говорилось чуть выше:
#main, #projects, #partners, #about, #contacts {
background: #0ff;
}
#main.current, #projects.current,
#partners.current, #about.current,
#contacts.current {
background: #ff0;
}Все заработало, аналогично примеру с «!important», но теперь и в IE6. Возможно, пример не совсем удачный потому, что получилось больше кода.
Уверен, что найдется и применение конструкции «.class#identificator». Надеюсь, прочтение этой статьи, поможет Вам сократь использование «!important» в ваших таблицах стилей.
seodon.ru | CSS справочник — !important
Опубликовано: 18.08.2010 Последняя правка: 10.12.2015
Многие браузеры позволяют пользователям подключать собственные таблицы стилей, чтобы они замещали или дополняли стили сайта. Например, пользователь может увеличить размер шрифта, изменить цветовую гамму HTML-страниц и т.д. Правило CSS !important используется для установки приоритета выполнения, когда авторский и пользовательский стили пытаются изменить одни и те же свойства какого-то элемента. Причем, во избежание конфликта, в CSS существуют определенные принципы обработки !important:
Если !important не используется, то будет применяться стиль автора.
Если !important указан только в пользовательском стиле, то будет применяться он, а если только в авторском, то, соответственно, стиль автора.
Если, для одного и того же селектора, !important указан и в авторской, и в пользовательской таблицах стилей, то приоритет будет у пользовательского стиля.
Естественно !important можно использовать и просто для управления приоритетом внутрисайтовых стилей.
Пример подключения пользовательской таблицы стилей в Internet Explorer.
Тип правила
Назначение: приоритет стилей.
Применяется: ко всем свойствам CSS.
Наследуется: да, но только подсвойствами какого-либо свойства, если оно объявлено, как !important. Например, свойство margin и его подсвойства margin-top, margin-right и другие.
Значения
!important является правилом, а не свойством CSS, и оно не имеет значений.
Синтаксис
свойство CSS: значение !important
Пример CSS: использование !important
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - CSS правило !important</title>
<style type="text/css">
div {
color: red !important; /* задаем красный цвет */
}
div {
color: green; /* зеленый цвет */
}
</style>
</head>
<body>
<div>Красный текст, а без !important был бы зеленый.</div>
</body>
</html>Результат примера
Результат. Использование правила !important.
Версии CSS
| Версия: | CSS 1 | CSS 2 | CSS 2.1 | CSS 3 |
| Поддержка: | Да | Да | Да | Да |
Браузеры
| Браузер: | Internet Explorer | Google Chrome | Mozilla Firefox | Opera | Safari | |
| Версия: | 6.0 | 7.0 и выше | 2.0 и выше | 2.0 и выше | 9.2 и выше | 3.1 и выше |
| Поддержка: | Частично | Да | Да | Да | Да | Да |
IE6 не понимает !important, когда внутри одного и того же селектора используется одно и то же свойство CSS с приоритетом и без. Например:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>seodon.ru - !important и IE6</title>
<style type="text/css">
div {
color: red !important;
color: green;
}
</style>
</head>
<body>
<div>Красный текст, а без !important был бы зеленый, но не в IE6.</div>
</body>
</html>В данном случае IE6 использует значение свойства, которое находится ниже в коде и текст станет зеленым. Ошибка.
Декларация !important в CSS
Декларация !important стала валидной с первой версии CSS, но похоже она приобрела плохую репутацию в последние годы. Однако если её использовать с осторожностью, то это будет полезным и мощным инструментом. Статья представляет собой руководство к тому как работает декларация и как её надо использовать.
Источник
Как использовать?
Декларация !important — это ключевое слово, которое может быть добавлено в конце любой пары ключ/значение. Например:
p {margin: 10px 5px 5px 10px !important}Каково её влияние?
CSS присваивает вес каждому правилу, в зависимости от его выборки и позиции в исходном элементе. Это определяет стиль HTML-элемента.
Если появляются два конфликтующих правила, то применяется следующий подход для его разрешения:
- Источник правила — если одно правило находится в таблице стилей сайта, а второе непосредственно на клиентском компьютере, то применено будет правило клиента.
- Специфика — если два или более правил имеют отношение к одному и тому же свойству, одного и того же элемента, а также один уровень важности и один источник, то будет применено правило более конкретного селектора.
- Порядок — если у двух правил один вес, то будет применено последнее.
Иногда необходимо поменять приоритет правил. Разорвать цепочку каскада можно с помощью декларации !important. В случае её использования, отмеченное правило будет иметь больший приоритет и именно оно будет использоваться.
Morrowind / Shutterstock.comВ следующем примере, второй селектор является более конкретным и объявлено в конце, но использоваться будет именно первое правило, поскольку в нём используется декларация !important, которое заменяет все остальные правила.
p {margin-left: 5px !important}
p {margin-left: 10px}Когда необходимо использовать !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.
Форматирование текста в таких редакторах осуществляется с помощью вставленных напрямую в html-разметку стилей. Эти стили можно переопределить в таблице стилей, используя декларацию !important.
Например, пользователь хочет вывести текст красным цветом
<div><p>Текст красного цвета</p></div>
Однако автор сайта может переопределить этот стиль, чтобы текст всех параграфов выводился, например, чёрным цветом:
#content p {color:black !important}Стилевые файлы для печати
Декларация !important также часто используется в таблицах стилей, предназначенных для печати. В этом случае автор сайта уверен, что страница печатается так, как он и предполагал.
Обратная сторона
Есть только один способ переопределить стиль отмеченный !important — это использовать более конкретный селектор и также отметить используемый стиль декларацией. Всё это может сделать файл стилей сильно запутанным и сложным для понимания.
В CSS1 декларация !important автора сайта имела больший приоритет над пользовательским файлом стилей. Это правило изменилось в CSS2, то есть пользователь всегда может переопределить внешний вид сайта.
Заключение
Использование декларации !important может сделать файл стилей сложным для понимания и отладки, однако если быть аккуратным, то она поможет вам сохранить время и нервы.
гарантия неизменяемости в CSS — CSS-LIVE
Перевод статьи The Importance of !important: Forcing Immutability in CSS с сайта csswizardry.com, опубликовано на css-live.ru с разрешения автора — Гарри Робертса.
От одного моего совета у клиентов и слушателей волосы встают дыбом:
Я советую использовать !important.
Вообще-то я рад, что !important поначалу вызывает отвращение — обычно от него и вправду нельзя ждать ничего хорошего — но всё же с ним связано кое-что еще…
В жизни порой случаются исключительные обстоятельства, в которых следовать правилам — далеко не лучшая тактика, и лишь контекст да здравый смысл определяют, когда стоит их нарушить.
Например, в Великобритании действует ограничение скорости 70 миль/ч (увы, мы всё ещё используем мили). Быстрее ехать не разрешено. Это незаконно.
Однако… когда на заднем сиденье умирает ваш друг и нужно срочно доставить его в больницу, пока он не истёк кровью, приходится вдавить газ в пол.
В 90% случаях правило оправдано. В целом, надёжнее ему следовать. Но наверняка встретятся ситуации, не попадающие в 90%.
Точно так же, по мере профессионального роста мы осознаём, что при подходящих обстоятельствах у правил бывают исключения.
Мудрость приходит с возрастом (точнее, с опытом), так что начинающих разработчиков я бы учил не использовать !important вообще. Но когда разработчики взрослеют и понимают, что не всё делится на черное и белое, можно пуститься в более тонкие подробности и добавить несколько оговорок.
Но прежде чем увидеть исключение из правил, взглянем на само правило.
Никогда не используйте !important сгоряча
Пытаться выкрутиться с помощью !important — самая радикальная, отчаянная, запредельная мера, на которую мы можем пойти. Крайне нерационально использовать !important, чтобы отделаться от проблемы с существующим CSS. Это вызовет цепную реакцию и заставит добавить ещё !important, а затем ещё и ещё, до бесконечности.
Не хватайтесь чуть что за !important. Не решайте проблему специфичности с помощью него. Не используйте его сгоряча.
Хаки для специфичности
Если вышло так, что наши свеженаписанные стили перебиваются старыми стилями проекта, у нас есть куда более безопасные способы повлиять на их специфичность.
Если нужно повысить специфичность одного класа, можно продублировать его (например, .btn.btn {}). А чтобы понизить специфичность ID, можно переписать его в виде селектора атрибута (например, [id="header"] {}). Подробнее можете прочитать об этом в моей статье «Хаки для укрощения специфичности».
В большинстве случаев в !important нет необходимости.
Верно, но где он тогда нужен?
Гарантия неизменяемости с помощью !important
Идея неизменяемости мне очень созвучна, меня она просто восхищает. Идея, что что-то нельзя изменить после создания, звучит потрясающе. Насколько увереннее мы бы себя чувстовали, зная, что что-то выглядит и ведёт себя одинаково, независимо от места применения? Обожаю эту идею.
Обычно, с CSS такого добиться сложно, поскольку в нем всё изначально строится вокруг наследования и вовсю задействует изменения. Но есть определённый тип правила, который отлично использует неизменяемость, и практически безопасен: служебные классы.
Служебные классы — крошечные классы, выполняющие очень специфическую и чёткую работу. Это классы вроде:
.u-text-center { text-align: center; }
.u-float-left { float: left; }
.u-text-large { font-size: 48px; }
Все они начинаются с u-, чтобы разработчик сражу же понимал, для чего они, и каждый из них отвечает за один простой кусок оформления.
В этих примерах все правила объявлены без !important, но на самом деле их очень, очень нужно было бы объявить с ним. И вот почему:
Используя в HTML класс u-text-center, мы принимаем точное, ясное и однозначное решение, что текст должен выравниваться по центру. Без толики сомнений. Однако, у селектора .u-text-center {} низкая специфичность, поэтому есть вероятность, что другой селектор может случайно переопределить его. Возьмём такие HTML и CSS:
.sub-content h3 {
...
text-align: left;
}
.u-text-center {
text-align: center;
}
<div> <h3>...</h3> </div>
К сожалению, здесь есть несоотвествие специфичности: у .sub-content h3 {} она выше, чем у .u-text-center {}, поэтому h3 в итоге выровнится по левому краю, несмотря на явное указание text-align: center;. Это тоже изменение: u-text-center больше не выравнивает по центру.
Вкратце, вот почему нужно вставлять !important в служебные стили. Нужно, чтобы служебные стили были неизменяемыми: не бывать такому, чтобы после применения класса u-text-center оказалось, что текст в блоке не отцентрирован.
Гарантируйте неизменяемость служебных классов, применяя !important в их объявлениях.
Конечно, в идеальном мире (что бы это ни было) у нас в CSS даже не было бы селектора .sub-content h3 {}, но это неизбежно.
- кто-то подключается к разработке и в конце концов пишет такой селектор
- похожий селектор уже был в какой-то устаревшей части проекта.
Гибкие и защищенные системы создаются не для идеального, а для реального мира, а в реальном мире люди пишут неаккуратный CSS. Неизменяемость благодаря !important — гарантия того, что никто не вызовет несоответствия или конфликта, даже случайно.
Обратите внимание на служебные классы
Полагаю, было бы не лишним немного рассказать про общее использование служебных классов.
Если мы не придерживаемся функционального CSS в стиле Tachions, Basscss или Atomic CSS (но это совсем другая тема), то нам, скорее всего, ни к чему много служебных классов в HTML.
Если вместо этого выбрать более модульный и компонентный подход в CSS (что мы скорее всего и делали), большинство из наших классов будут очень специальными, например:
.c-carousel {}
.o-media__body {}
.c-nav-primary {}
.c-btn--large {}
У них будет область видимости (блок, в БЭМ) и хорошая инкапсуляция. Красота классов вроде этого в том, что можно легко обнаружить взаимосвязи в HTML (что гораздо труднее — практически невозможно — с функциональным CSS), например:
<blockquote> <img ... /> <p>...</p> </blockquote>
Здесь можно ясно видеть взаимосвязь между двумя различными и раздельными ветками оформления.
Предположим, что у одного конкретного отзыва margin-bottom гораздо больше. Ни с одним другим отзывом этого делать не надо, и при этом ему нужен бОльший margin-bottom, когда он находится именно в этой части страницы. Такое изменение дизайна нужно только один раз и в одном месте.
Здесь как нельзя кстати придется служебный класс:
<blockquote>
Мы используем служебный класс, поскольку дополнительный margin-bottom никак не связан с конкретным отзывом; это крайне контексто-зависимая и временная процедура, поэтому не следует жёстко вбивать это изменение в CSS нашего отзыва.
С другой стороны, если в стиле отзыва есть большой размер шрифта, и эту особенность можно придать любому отзыву, служебный класс ни к чему. Это не временная процедура, относящаяся к конкретному отзыву, поэтому нужно систематизировать и инкапсулировать его с помощью модификатора БЭМ:
<blockquote>
Так что вот общее правило:
Если это неизменное оформление, оформляйте и кодируйте его прямо в CSS. Если же это кратковременное и разовое оформление, используйте служебный класс.
Пожалуй, из всех типов классов меньше всего мне нравятся служебные, поскольку от них всего шаг до встроенных стилей. Используйте их экономно, только для очень временных и одноразовых изменений.
P.S. Это тоже может быть интересно: