Java, UX, HTML, CSS, WEB-design

!important CSS-объявления: как и когда их использовать

Краткое описание по статье !important CSS-объявления: как и когда их использовать

Название: !important CSS-объявления: как и когда их использовать . Краткое описание: [ad_1] ⭐ Луи Лаз . Дата публикации: 23.02.2022 . Автор: Алишер Валеев .

Для чего создан сайт Novosti-Nedeli.ru

Данный сайт посвящен новостям мира и мира технологий . Также тут вы найдете руководства по различным девайсам.

Сколько лет сайту?

Возраст составляет 3 года

[ad_1]

  • Луи Лазарис

  • 0 Комментарии

!important CSS-объявления: как и когда их использовать

  • 9 минут чтения

  • Кодирование, CSS, Основы

Краткое резюме ↬

Когда спецификация CSS1 была разработана в середине-конце 90-х годов, она представила !important объявления, которые помогут разработчикам и пользователям легко переопределить обычную специфичность при внесении изменений в свои таблицы стилей. По большей части, !important объявления остались прежними, только с одним изменением в CSS2.1 и ничего нового не было добавлено или изменено в спецификации CSS3 в связи с этим уникальным объявлением.

Когда спецификация CSS1 была разработана в середине-конце 90-х годов, она представила !important объявления, которые помогут разработчикам и пользователям легко переопределить обычную специфичность при внесении изменений в свои таблицы стилей. По большей части, !important объявления остались прежними, только с одним изменением в CSS2.1 и ничего нового не было добавлено или изменено в спецификации CSS3 в связи с этим уникальным объявлением.

Дальнейшее чтение на SmashingMag:

  • Специфика CSS и наследование
  • Овладение принципами CSS: подробное руководство
  • Специфика CSS: вещи, которые вы должны знать
  • Наследование CSS, каскад и глобальная область видимости

Давайте посмотрим на о чем именно эти виды декларацийи когда, если вообще когда-либо, вы должны их использовать.

Краткое введение в каскад

Прежде чем мы попадем в !important декларации и то, как именно они работают, давайте придадим этому обсуждению немного контекста. В прошлом журнал Smashing Magazine подробно освещал специфику CSS, поэтому, если вы хотите получить подробное обсуждение каскада CSS и того, как связана специфичность, ознакомьтесь с этой статьей.

Еще после прыжка! Продолжить чтение ниже ↓

Добавление !important CSS в Инструменты разработчика

Ниже приведена базовая схема того, как любой конкретный документ в стиле CSS будет решать, какой вес придавать различным стилям, с которыми он сталкивается. Это общее резюме каскада, как описано в спецификации:

  • Найти все объявления, применимые к элементу и свойству
  • Примените стиль к элементу в зависимости от важности и происхождения, используя следующий порядок, при этом первый элемент в списке имеет наименьший вес:
    • Объявления от пользовательского агента
    • Заявления от пользователя
    • Декларации от автора
    • Декларации автора с !important добавлен
    • Объявления от пользователя с !important добавлен
  • Применяйте стили на основе специфики, при этом более конкретный селектор «выигрывает» над более общими.
  • Применять стили в соответствии с порядком их появления в таблице стилей (т. е. в случае ничьей «выигрывает» последний)

Имея этот базовый план, вы, вероятно, уже можете видеть, как !important декларации имеют значение и какую роль они играют в каскаде. Давайте посмотрим на !important Подробнее.

Что такое важный CSS?

Ан !important объявление предоставляет автору таблицы стилей способ указать значение CSS больше веса чем это естественно.

Синтаксис и описание

Здесь следует отметить, что фраза «!important Declaration» является ссылкой на всю декларацию CSS, включая свойство и значение, с !important добавлено (спасибо Брэду Черняку за указание на это несоответствие). Вот простой пример кода, наглядно иллюстрирующий, как !important влияет на естественный способ применения стилей:

#example {
    font-size: 14px !important; 
}

#container #example {
    font-size: 10px;
}

В приведенном выше примере кода элемент с идентификатором «пример» будет иметь размер текста 14 пикселей из-за добавления !important.

Без использования !important, есть две причины, по которым второй блок объявления должен иметь больший вес, чем первый: Второй блок находится позже в таблице стилей (т. е. он указан вторым). Также второй блок имеет большую специфичность (#container с последующим #example вместо того, чтобы просто #example). Но с включением !importantпервый font-size правило теперь имеет больший вес.

Некоторые вещи, чтобы отметить о !important декларации:

  • Когда !important впервые было представлено в CSS1, авторское правило с !important объявление имело больший вес, чем пользовательское правило с !important декларация; для улучшения доступности это было изменено в CSS2.
  • Если !important используется в сокращенном свойстве, это добавляет «важности» всем подсвойствам, которые представляет сокращенное свойство.
  • То !important ключевое слово (или оператор) должно быть помещено в конце строки, непосредственно перед точкой с запятой, иначе оно не будет иметь никакого эффекта (хотя пробел перед точкой с запятой не нарушит его)
  • Если по какой-то причине вам нужно дважды написать одно и то же свойство в одном и том же блоке объявлений, добавьте !important до конца первого, первый будет иметь больший вес в каждом браузере, кроме IE6 (это работает как хак только для IE6, но не делает недействительным ваш CSS)
  • В IE6 и IE7, если вы используете другое слово вместо !important (подобно !hotdog), правилу CSS все равно будет придан дополнительный вес, в то время как другие браузеры его проигнорируют.

Когда следует использовать !important?

Как и в любой технике, есть плюсы и минусы в зависимости от обстоятельств. Итак, когда его следует использовать, если вообще? Вот мой субъективный обзор потенциально допустимого использования.

Никогда

!important декларации не следует использовать, если они не являются абсолютно необходимыми после того, как все другие пути были исчерпаны. Если вы используете !important из-за лени, чтобы избежать надлежащей отладки или ускорить проект до завершения, тогда вы злоупотребляете им, и вы (или те, кто наследует ваши проекты) пострадаете от последствий.

Если вы включите его даже в небольшом количестве в свои таблицы стилей, вы скоро обнаружите, что некоторые части вашей таблицы стилей будет труднее поддерживать. Как обсуждалось выше, важность свойства CSS происходит естественным образом благодаря каскаду и специфичности. Когда вы используете !important, вы нарушаете естественный поток ваших правил, придавая больший вес правилам, которые не заслуживают такого веса.

Если вы никогда не используете !importantто это признак того, что вы понимаете CSS и тщательно продумываете свой код перед его написанием.

При этом старая поговорка «никогда не говори никогда» здесь, безусловно, применима. Итак, ниже приведены некоторые законные способы использования !important.

Чтобы помочь или проверить доступность

Как уже упоминалось, пользовательские таблицы стилей могут включать !important декларации, позволяющие пользователи с особыми потребностями чтобы придать вес определенным правилам CSS, которые помогут им читать и получать доступ к контенту.

Пользователь с особыми потребностями может добавить !important к типографским свойствам, таким как font-size для увеличения текста или правил, связанных с цветом, для повышения контрастности веб-страниц.

На снимке экрана ниже показана домашняя страница Smashing Magazine с пользовательской таблицей стилей, переопределяющей обычный размер текста, что можно сделать с помощью панели инструментов разработчика Firefox:

В Smashing Magazine добавлена ​​таблица стилей пользователя

В данном случае размер текста настраивался без использования !important, потому что пользовательская таблица стилей переопределит авторскую таблицу стилей независимо от специфики. Однако, если размер текста для основного текста был задан в таблице стилей автора с помощью !important объявление, пользовательская таблица стилей не могла переопределить настройку размера текста даже с более конкретным селектором. Включение !important решает эту проблему и сохраняет возможность регулировки размера текста в пределах полномочий пользователядаже если автор злоупотребил !important.

Временное решение неотложной проблемы

Будут моменты, когда что-то даст ошибку в вашем CSS на работающем клиентском сайте, и вам нужно очень быстро применить исправление. В большинстве случаев вы должны иметь возможность использовать Firebug или другой инструмент разработчика для отслеживания кода CSS, который необходимо исправить. Но если проблема возникает в IE6 или другом браузере, у которого нет доступа к инструментам отладки, вам может потребоваться быстрое исправление с помощью !important.

После того, как вы переместите временное исправление в производственную среду (тем самым осчастливив клиента), вы можете работать над устранением проблемы локально, используя более удобный для сопровождения метод, который не портит каскад. Когда вы найдете лучшее решение, вы можете добавить его в проект и удалить !important — и клиент от этого ничего не узнает.

Переопределение стилей в Firebug или другом инструменте разработчика

Проверка элемента в инструментах разработчика Firebug или Chrome позволяет редактировать стили на лету, тестировать, отлаживать и т. д., не затрагивая настоящую таблицу стилей. Взгляните на скриншот ниже, на котором показаны некоторые стили Smashing Magazine в инструментах разработчика Chrome:

Переопределение стилей в инструментах разработчика Chrome

Выделенный фон правило стиля имеет линию через него, что указывает на то, что это правило было переопределено более поздним правилом. Чтобы повторно применить это правило, вы можете найти более позднее правило и отключить его. В качестве альтернативы вы можете отредактировать селектор, чтобы сделать его более конкретным, но это сделает весь блок объявлений более конкретным, что может быть нежелательно.

!important можно добавить в одну строку, чтобы вернуть значение переопределенному правилу, что позволит вам протестировать или отладить проблему CSS без внесения серьезных изменений в вашу фактическую таблицу стилей, пока вы не решите проблему.

Вот то же правило стиля с !important добавлен. Вы заметите, что линейный переход исчез, потому что это правило теперь имеет больший вес чем правило, которое ранее переопределяло его:

Добавление !important в Инструменты разработчика

Переопределение встроенных стилей в пользовательском контенте

Одним из неприятных аспектов разработки CSS является то, что пользовательский контент включает в себя встроенные стили, как это происходит с некоторыми редакторами WYSIWYG в CMS. В каскаде CSS встроенные стили переопределяют обычные стили, поэтому любые нежелательные стили элементов, возникающие в сгенерированном содержимом, будет трудно, если вообще возможно, изменить с помощью обычных правил CSS. Вы можете обойти эту проблему с помощью !important объявление, потому что правило CSS с !important в таблице стилей автора переопределит встроенный CSS.

Для таблиц стилей печати

Хотя это не обязательно во всех случаях и может быть нежелательно в некоторых случаях по тем же причинам, упомянутым ранее, вы можете добавить !important объявления к вашим таблицам стилей только для печати, чтобы помочь переопределить определенные стили, не повторяя специфичность селектора.

Для постов в блоге с уникальным дизайном

Если вы баловались уникальными постами в блогах (многие дизайнеры не согласны с использованием «художественного направления» для этой техники, и это правильно), как показано на Heart Directed, вы знаете, что такое начинание требует каждого отдельного дизайна. article, чтобы иметь свою собственную таблицу стилей, иначе вам нужно использовать встроенные стили. Вы можете присвоить отдельной странице собственные стили, используя код, представленный в этом посте в блоге Digging Into Wordpress.

Использование !important Может пригодиться в таком случае, позволяя вам легко переопределять стили по умолчанию, чтобы создать уникальный опыт для отдельной записи в блоге или страницы на вашем сайте, не беспокоясь о естественной специфичности CSS.

Заключение

!important Объявления лучше всего зарезервировать для особых потребностей и пользователей, которые хотят сделать веб-контент более доступным, легко переопределяя пользовательский агент по умолчанию или таблицы стилей автора. Таким образом, вы должны сделать все возможное, чтобы ваш CSS был должным образом продуман и избегать использования !important где это возможно. Даже во многих случаях, описанных выше, включение !important не всегда необходимо.

Тем не менее, !important является допустимым CSS. Вы можете унаследовать проект, в котором его использовали предыдущие разработчики, или вам может понадобиться что-то быстро исправить — так что это может пригодиться. Конечно, полезно лучше понять его и быть готовым использовать его в случае необходимости.

Вы когда-нибудь использовали !important в ваших таблицах стилей? Когда вы это делаете? Есть ли какие-либо другие обстоятельства, которые, по вашему мнению, потребуют его использования?

Дополнительные ресурсы

  • !важные правила спецификации CSS2.1
  • !важные объявления в справочнике CSS SitePoint
  • Специфика CSS и наследование в Smashing Magazine
  • Все, что вам нужно знать о !important объявлениях CSS
  • Каковы последствия использования «!important» в CSS?



[ad_2]
Source: https://smashingmagazine.com

Заключение

Вы ознакомились с статьей — !important CSS-объявления: как и когда их использовать

Пожалуйста оцените статью, и напишите комментарий.

Похожие статьи

Добавить комментарий

Ваш адрес email не будет опубликован.

Кнопка «Наверх»