Что такое important в css
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».
В продолжении расскажем, как правило !important меняет приоритетность.
Давайте рассмотрим пример:
Пример¶
Пример¶
Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример¶
Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Пример¶
Пользовательские таблицы стилей¶
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
!important
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 7.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#important-rules |
Версии CSS
Описание
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
/* Размер текста 8 пунктов */
font-size: 8pt
>
/* Черный цвет текста */
color: #000;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
/* Серый цвет текста */
color: silver;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
/* Серый цвет текста */
color: silver;
Lorem ipsum dolor sit amet.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
Lorem ipsum dolor sit amet.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
Синтаксис
Значения
У этого свойства нет значений.
HTML5 CSS2.1 IE Cr Op Sa Fx
Браузеры
!important
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS | |
| 6.0 | 7.0+ | 1.0+ | 3.5+ | 3.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
| Значение по умолчанию | Нет |
|---|---|
| Наследуется | Нет |
| Применяется | Ко всем элементам |
| Ссылка на спецификацию | http://www.w3.org/TR/CSS21/cascade.html#important-rules |
Версии CSS
Описание
При использовании пользовательской таблицы стилей или одновременном применении разного стиля автора и пользователя к одному и тому же селектору, браузер руководствуется следующим алгоритмом.
/* Размер текста 8 пунктов */
font-size: 8pt
>
/* Черный цвет текста */
color: #000;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Будет применяться стиль автора, а именно: установлен серый цвет текста, размер шрифта 8 пунктов.
/* Серый цвет текста */
color: silver;
/* Размер текста 12 пунктов */
font-size: 12pt
>
Lorem ipsum dolor sit amet.
Цвет текста будет установлен пользовательским, а размер шрифта останется исходным. В итоге увидим черный текст размером 8 пунктов.
/* Серый цвет текста */
color: silver;
Lorem ipsum dolor sit amet.
Будут использоваться все стилевые свойства пользователя. Текст станет отображаться как черный, размер 12 пунктов.
Lorem ipsum dolor sit amet.
Рис. 1. Подключение стиля пользователя в браузере Internet Explorer
В браузере Opera аналогичное действие происходит через команду Инструменты > Общие настройки > Вкладка «Расширенные» > Содержимое > Кнопка «Настроить стили» (рис. 2).
Рис. 2. Подключение стиля пользователя в браузере Opera
Синтаксис
Значения
У этого свойства нет значений.
HTML5 CSS2.1 IE Cr Op Sa Fx
Браузеры
Любая фича в «кривых» руках становится плохой. Импортант — не исключение. Плохо не то, что он умеет, а то, как его используют.
В CSS для определения приоритета стилей мы пользуемся механизмом специфичности. Мы пишем каскады или сложные селекторы, повышаем вес селектора, таким образом указываем браузеру приоритетность одних стилей над другими.
В этом случае, несмотря на то, что синий цвет применяется к заголовку после красного, в результате мы получим все же красный заголовок. Потому, что первый селектор является более специфичным (если вдруг вы с этим не знакомы, не читайте дальше — будет только хуже, лучше вот сюда и учите специфичность).
Заголовок будет синим! Это свойство нарушает естественный поток написанных нами правил и менее приоритетным стилям даёт наибольший приоритет.
Ну хотя, как «плевать»… Не совсем уж и плевать. Допишем ещё один импортант.
Импортант — это плохо, когда так:
«Хм, я же написал “красный”, почему мой заголовок не красный? А если так?»
«Отлично! Красный!» А точно ли отлично?
Такой подход плох как минимум потому, что вы переопределяете стили не разобравшись, почему они не применялись без импортанта. Скорее всего, вес селектора, которым вы воспользовались, оказался просто недостаточным и, написав чуть более точный и «тяжелый» селектор, вы бы решили свою проблему, а так вы жестко переопределили стили, и хорошо, если вы знаете и проверили все места, где использовался этот класс, но если это не так, то вы подчинили элемент в одном месте и, вероятно, сломали в другом.
Инструмент для hotfix
Очень часто, когда я задаю кому-то вопрос про импортанты, я слышу ответ в стиле: «Я использую important тогда, когда мне нужно быстро пофиксить проблему и некогда разбираться в коде, который писал не я и который написан очень плохо».
Да, но только задачи всегда «срочные», такие задачи, как правило, никто и никогда не доделает, так это и оставив. Вы и сами не заметили, как сделали «плохой чужой код» ещё хуже.
Что значит «быстро»? Разве узнать необходимый вес селектора для переопределения так сложно и долго? Мы очень активно используем DevTools при разработке, и для решения этой задачи ответ у нас есть там же.
Инспектируем элемент, который хотим изменить. Его текущий цвет — черный. Смотрим, по какому же селектору был назначен этот цвет?
Используем этот же селектор для назначения нового цвета или для повышения веса, и дело в шляпе, какой бы сложности не был этот селектор.
Сторонние решения и чужой код
Этот ответ чуть ближе к правде, но только если его чуть более точно сформулировать. Именно в такой форме он неправильный, потому как стили сторонних файлов можно перезаписывать точно так же, как и свои, просто дописывая их после подключения чужих стилей и повышая вес селектора.
Однако в некоторых случаях этот ответ «попадает» в вопрос. Например, если вы подключили слайдер к своей странице, который реализован так, что при переключении слайда JavaScript-ом перезаписываются значения некоторых свойств в CSS.
А вам почему-то надо переопределить эти свойства, проигнорировав изменения самого плагина.
JS может переназначать значения свойств только с помощью inline-стилей. То есть фактически любые свойства, изменённые у элемента с помощью JavaScript, будут просто записаны в атрибут style. С точки зрения механизма специфичности, эти стили более приоритетные, и как бы вы ни повышали вес селектора, вы не сможете перезаписать их.
Important во благо
Рассмотрим ещё один случай, который иногда применяют в коде различных библиотек и плагинов.
Если вы откроете исходный CSS-код библиотеки Bootstrap, то увидите, что там разработчики библиотеки очень часто прибегают к использованию импортантов. Возможно, им тоже просто нужно было быстро пофиксить, и они так поступили (сарказм), но вообще этому есть более подходящее объяснение. В этом случае important-ы используются «во благо». Таким образом разработчики Bootstrap «защищают» свой код.
Дело в том, что вы, подключая к своему сайту эту библиотеку, можете переопределять её исходные стили. Таким образом, разработчики перестраховались, и сломать поведение их кода будет сложнее, если вы не знаете, как работает специфичность. Но если вы понимаете, как работает механизм специфичности в CSS, то можете переопределить их импортант, записав свои стили тоже с импортантом, но с более «тяжелым» селектором.
Хелперы
В предыдущем абзаце, по сути, описаны все случаи, когда использование импортантов будет нормальным и правильным. Это те случаи, в которых применение импортантов будет неизбежным. Но существуют ещё случаи, в которых использование импортантов будет допустимым, хоть, возможно, уже и не совсем уместным.
Когда всё таки можно
Если следовать этому правилу, то выходит, что в обычной верстке, особенно если вы верстаете страницу с нуля, у вас не возникает необходимости использовать импортант вплоть до того момента, пока вы не начинаете подключать сторонние решения к своей странице, но даже это, как мы разобрались выше, не обязательно приводит к их использованию.
Современные методологии вроде БЭМ тоже диктуют свои правила, в которых использование инлайновых стилей или импортантов будет неуместным.
Импортант вам не нужен не потому, что он какой-то загадочный и ужасный, а просто потому, что в большинстве случаев можно обойтись без него.
Все исключения, которые я определил для себя, как правило, сводятся к не очень типичным случаям. Например, у вас может появиться необходимость использовать это, когда вы разрабатываете собственную библиотеку, плагин или браузерное расширение и вам нужно какое-то более приоритетное поведение конкретных стилей. Однако это далеко не про типичное регулярное использование.
При стилизации вашего веб-сайта вы можете применить несколько объявлений CSS к одному и тому же элементу. В этом случае браузер определяет, какие объявления наиболее актуальны для элемента, и применяет их.
Эта релевантность – или специфичность – основана на правилах сопоставления селекторов CSS. Селекторы CSS – это модификаторы, которые сообщают браузеру, какие элементы следует стилизовать с помощью CSS. Существуют разные типы селекторов, каждый со своим синтаксисом и уровнем специфичности.
Следующие типы селекторов ранжируются от самой высокой до самой низкой:
Примечание. Универсальный селектор (*) не влияет на специфичность.
Если несколько объявлений с одинаковой специфичностью, таких как селектор класса и селектор атрибутов, сделаны для одного и того же элемента, то последнее объявление (то есть объявление, указанное ниже в таблице стилей) будет применено к элементу.
Есть еще одно важное правило, которое следует учитывать при кодировании HTML и CSS вашего веб-сайта:! Important. Это исключение из всех упомянутых выше правил специфичности. Давайте подробнее рассмотрим, что это означает ниже.
Что значит «важно» в CSS?
В CSS значение important означает, что к элементу должно применяться только значение свойства! Important, а все другие объявления элемента следует игнорировать. Другими словами, важное правило может использоваться для переопределения других правил стилизации в CSS.
Хотя при объединении значений свойств проще, чем следовать многочисленным правилам специфичности, использование свойства! Important считается плохой практикой, потому что оно нарушает естественное каскадирование таблиц стилей, что значительно затрудняет обслуживание и отладку вашего веб-сайта.
Однако есть определенные варианты использования, в которых использование свойства! Important является идеальным. Один из таких вариантов использования – определение служебных классов. Крис Койер в статье «Уловки CSS» использует в качестве примера класс кнопки.
Обратите внимание: я буду использовать онлайн-редактор кода W3Schools для создания приведенных ниже примеров на основе кода Койера. Вы можете щелкнуть любую ссылку на исходный код, чтобы просмотреть полный фрагмент кода для примера и создать свой собственный.
Допустим, вы хотите, чтобы любой элемент, на который нацелен класс кнопки, выглядел как одна и та же кнопка: красный фон, белый цвет шрифта, сплошная черная рамка. Без свойства! Important вы бы использовали следующий код, чтобы ссылка выглядела как кнопка.
Теперь предположим, что вы продолжаете создавать свою веб-страницу. В какой-то момент вы добавляете в свой HTML новый раздел с идентификатором «content». Этот раздел содержит еще одну ссылку с классом кнопки. Вы также добавляете еще одно правило в свой CSS, определяя все элементы с идентификатором «content», чтобы они имели синюю границу с точками. У вас будет следующий код.
Подобный сценарий неизбежен, независимо от того, создаете ли вы сайт с нуля или используете фреймворк, такой как Bootstrap CSS. Чем больше объем кода, с которым вы работаете, тем сложнее отслеживать специфику ваших селекторов CSS.
Вы можете избежать несоответствий стиля вышеупомянутого сценария на своем сайте, используя свойство! Important. Давайте посмотрим, как именно использовать это свойство ниже.
Как использовать Important в CSS
Использовать правило! Important в CSS очень просто. Вам просто нужно добавить! Important в конце строки, непосредственно перед точкой с запятой. Итак, синтаксис будет таким:
Давайте посмотрим, как изменяется CSS для приведенного выше примера при добавлении правила! Important.
HTML остается прежним:
Но предположим, что вы изменили цветовую схему своего веб-сайта или не хотите, чтобы все элементы с классом кнопки выглядели одинаково. Какой бы ни была причина, вы можете изменить правило! Important в своем CSS. Посмотрим, как это делается ниже.
Как переопределить важное в CSS
Есть два способа переопределить тег! Important в CSS. Вы можете добавить еще одно правило CSS с тегом! Important и использовать селектор с более высокой специфичностью. Или вы можете добавить другое правило CSS с тегом! Important, используя тот же селектор, и просто добавить его позже в таблице стилей.
Почему работают эти два метода? Из-за правил специфики. Когда два объявления, использующие правило! Important, применяются к одному и тому же элементу, будет применяться объявление с большей специфичностью или объявление, определенное последним. Возможно, вы помните эти правила из введения, но важно понимать, что они применяются к объявлениям, использующим правило! Important, а также к объявлениям, не использующим правило.
Вместо того, чтобы заменять свойство! Important в CSS другим свойством! Important, лучше всего переписать правило и полностью отказаться от использования этого свойства. Но иногда это невозможно.
Возьмем, к примеру, пользовательские таблицы стилей. Используя настраиваемую таблицу стилей пользователя, читатель может переопределить стили веб-сайта в соответствии со своими пожеланиями. Читатель может, например, увеличить размер шрифта или изменить цвет типографики на странице, чтобы они могли лучше видеть контент.
Поскольку определяемая пользователем таблица стилей переопределяет таблицу стилей автора независимо от специфики, читатель может добавлять правила CSS без тега! Important. Однако, если таблица стилей автора использует правило! Important для определения размера или цвета шрифта, тогда в таблице стилей пользователя будет необходимо правило! Important.
Давайте продолжим использовать тот же пример кнопки сверху. Скажем, на моем веб-сайте уже были применены важные правила к классу кнопок. Но теперь я хочу, чтобы все элементы с именем «content» имели синюю пунктирную рамку.
Мне нужно просто переписать код, удалив все важные теги из моего CSS. Но, допустим, у меня не хватает времени и я ищу быстрое решение. Затем я мог бы просто добавить тег! Important в селектор CSS ID. Тогда оба объявления будут использовать свойство! Important, и, поскольку селекторы ID имеют более высокую специфичность, чем селекторы классов, элемент в разделе содержимого будет иметь синюю пунктирную границу.
HTML остается прежним:
HTML остается прежним:
Использование свойства! Important в вашем CSS
Хотя объявления! Important следует редко использовать в коде, все же необходимо понимать, что это за свойство и как его использовать. Возможно, вам понадобится использовать правило! Important в ваших пользовательских таблицах стилей. Возможно, вы возьмете на себя управление веб-сайтом, содержащим экземпляры правила. Какова бы ни была причина, знакомство со свойством! Important является полезным шагом в изучении HTML и CSS.