!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. Вес правила определяется количеством каждого из типов селекторов в данном правиле. Если у нескольких правил специфичность одинакова, то к элементу применяется последнее по порядку правило CSS. Специфичность имеет значение только в том случае, если один элемент соответствует нескольким правилам. Согласно спецификации CSS, правило для непосредственно соответствующего элемента всегда будет иметь больший приоритет, чем правила, унаследованные от предка.
Типы селекторов
В следующем списке типы селекторов расположены по возрастанию специфичности:
Стили, объявленные в элементе (например, style=»font-weight:bold» ), всегда переопределяют любые правила из внешних файлов стилей и, таким образом, их специфичность можно считать наивысшей.
Несколько практических советов:
Использовать более специфичные правила. Чтобы сделать правило более специфичным и повысить его приоритет, укажите один элемент или несколько перед нужным вам элементом:
Вне зависимости от порядка следования правил, текст всегда будет зелёным, поскольку у этого правила наибольшая специфичность (при этом, правило для голубого цвета имеет преимущество перед правилом для красного, несмотря на порядок следования).
Пример из практики: Некоторые плохо написанные плагины jQuery, использующие присваивание стилей самим элементам.
Пример большей специфичности:
С более подробной информацией можно ознакомиться по следующим ссылкам:
. отобразится на экране так:
Это текст в div.inner
Специфичность основана на форме
Специфичность опирается на форму селектора. В следующем примере, при определении специфичности селектора, селектор *[id=»foo»] считается селектором атрибута, даже при том, что ищет идентификатор.
. в результате выглядят так:
Потому что оба правила соответствуют одному и тому же элементу, но селектор идентификатора имеет большую специфичность.
Независимость от расположения
Потому что, хотя оба объявления имеют одинаковое количество типов селекторов, но селектор html h1 объявлен последним.
Непосредственно соответствующие элементы и унаследованные стили
. тоже отобразится как:
Потому что селектор h1 непосредственно соответствует элементу, а стиль, задающий зелёный цвет, всего лишь унаследован от родителя.
Когда вы смотрите Каскадную таблицу стилей (CSS) веб-страницы, первое, что вы заметите в коде, это !important. Это ключевое слово влияет на приоритетную обработку внутри таблицы стилей.
Каскадная таблица стилей на самом деле является каскадной. Это означает, что стили расположены в особом порядке. Стили обычно применяются в том порядке, в каком читает их браузер. Примените первый стиль, потом второй и т. д.
Поэтому, если нам встречается стиль наверху таблицы стилей, а потом опускается вниз внутри файла, тогда второй сценарий этого стиля это сценарий, примененный в последующих экземплярах, а не в первом. В сущности последний перечисленный используется, если две стили указывают одно и то же (т. е. они имеют одинаковый уровень специфики).
Давайте представим, что таблица стилей содержит следующие стили:
Несмотря на то, что к первому параграфу применен зеленый цвет, текст параграфа будет отображен в черном цвете. Причиной этому является то, что значение «black» применяется вторым. Так как CSS читается сверху вниз, завершением является «black».
В продолжении расскажем, как правило !important меняет приоритетность.
Давайте рассмотрим пример:
Пример¶
Пример¶
Здесь спецификой является 0,0,1,0. Если есть и другие селекторы с высокой спецификой, которые влияют на элемент, у вас могут быть проблемы в таком виде:
Пример¶
Как видите, кнопки с особым дизайном имеют нижнюю пунктирную границу в зеленом цвете, но мы ожидали другое. Довольно просто и иногда полностью подходяще установить CSS селектор со значением выше 0,0,1,0.
Пример¶
Пользовательские таблицы стилей¶
Эта директива была введена, чтобы помочь пользователям веб-страниц справиться с таблицами стилей, которые представляют для них трудность при использовании или чтении страниц.
При стилизации вашего веб-сайта вы можете применить несколько объявлений 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.
Не так давно какой-то пользователь создал в Twitter опрос о CSS специфичности. Большинство ответило на него неверно. В статье мы расскажем про CSS детальнее.
В этой статье мы проведем рефакторинг CSS-кода одного проекта с проблемами специфичности.
CSS специфичность
Определение
MDN Web Docs описывает специфичность, как: способ, с помощью которого браузеры определяют, какие значения свойств CSS наиболее соответствуют элементу и, следовательно, будут применены.
Правила
При определении того, какие именно свойства CSS нужно применить к элементу, браузер использует исходный порядок следования набора стилей CSS (то есть каскадность). Но это правило применимо лишь в случаях, когда CSS-селекторы обладают равной специфичностью. Что же произойдет, если специфичность одного селектора окажется выше специфичности другого?
В таком случае будет использоваться специфичность CSS-селектора. Чем выше его специфичность, тем больше шансов, что браузер применит именно это объявление CSS.
В примере выше оба CSS селектора нацелены на одинаковый HTML элемент – якорный тег. Для определения нужного правила браузер рассчитывает значения специфичности и проверяет, какое из них является наивысшим. В данном случае, высшее значение оказалось у первого селектора, поэтому к якорному тегу браузер применит именно его.
Проект
Пара слов о проекте, который будем рефакторить: это лендинг в стиле Netflix с использованием интерфейса MovieDB.
Таблица стилей
Основная цель – удалить ключевое слово “!important” из CSS-правил и провести рефакторинг кода, чтобы он применял только правила специфичности.
Ниже представлена таблица стилей проекта.
Мы видим, что чаще всего !important используется в разделе с медиа-запросами, описывающими стили, которые браузер применяет при ширине экрана меньше 750 пикселей.
Что же произойдет, если удалить ключевое слово !important из правил CSS, к которым оно применяется? У нас потеряется «верховод», который принудительно переопределяет CSS правила других селекторов для одного HTML-элемента. А конфликты между CSS-правилами браузер начнет проверять строго по таблице стилей.
При конфликтах приоритетности браузер руководствуется исходным порядком следования, специфичностью и важностью CSS-селектора. Если селекторы с конфликтными правилами обладают одинаковой специфичностью, то браузер учитывает исходный порядок следования и применяет CSS-правила селектора из таблицы сверху вниз. К сожалению, данная процедура не используется нашей таблице стилей.
Если CSS-селекторы с конфликтными правилами обладают разной специфичностью, то браузер выбирает правило селектора с наивысшей специфичностью. Этот принцип подходит нашей таблице стилей. CSS-селекторы в медиа-запросах обладают более низкой специфичностью, чем CSS-селекторы в основной части таблицы стилей.
Проблема определена. Пора переходить к ее решению!
Для начала найдем CSS-селекторы, соответствующие селекторам медиа-запросов.
Специфичность CSS-селекторов из основной части таблицы стилей выше. Поскольку правила специфичности имеют больший приоритет, чем правила исходного порядка следования, браузер применяет именно их.
Чтобы исправить ситуацию, необходимо увеличить значение специфичности CSS-селекторов в медиа-запросах. Тогда при одинаковой специфичности нескольких селекторов для одного HTML-элемента, браузер будет руководствоваться исходным порядком следования. Тогда при ширине экрана менее 750 пикселей будут применяться CSS-правила из медиа-запросов (которые расположены ниже по таблице стилей).
Конечный результат выглядит так:
Заключение
Сама концепция специфичности достаточно объемна. Но стоит разобраться в ней на практическом примере с подробной документацией, как вы научитесь применять эти знания в своих проектах.
