Бедное старое !important заявление пользуется большой популярностью в сообществе CSS, и на то есть веская причина. Это не нужно, создает кошмар обслуживания и делает пустое издевательство над каскадом. Я много лет не думал об использовании !important , пока не обнаружил одно очень хорошее применение: таблицы стилей печати.
Давайте представим, что мы хотим создать галерею изображений. Делая все возможное в соблюдении идеалов прогрессивного улучшения, мы сначала убедитесь, что изображения содержатся в списке HTML. В конце концов мы хотим использовать JavaScript для создания эффекта слайд-шоу с постепенным исчезновением / исчезновением, но наша база — это один столбец изображений. Если у посетителя отключен JavaScript, это то, что он увидит.
Хорошо, пока все хорошо. Однако, когда мы создадим таблицу стилей для печати, мы обнаружим недостаток в нашем плане: когда вы используете JavaScript для анимации HTML-элементов, вы неизбежно заканчиваете тем, что изменяете атрибут style элементов. В нашем слайд-шоу JavaScript изменил position и opacity изображений, поэтому за один раз отображается только одно. Когда мы отправляемся на печать страницы галереи, хотя нам нужен один столбец изображений, в итоге мы печатаем только одно изображение. Это потому, что вы не можете указать целевой медиа-тип для CSS, объявленный в атрибуте style элемента; Вы не можете сказать, что все стили, объявленные в атрибуте style , предназначены только для screen .
Так что вам нужен способ указать стили печати, которые могут переопределять встроенные стили. Есть только один способ сделать это !important В таблице стилей печати измените position и opacity, элементов изображения и добавьте !important :
img.gallery { position: static !important; opacity: 1 !important; }
Это действительно так; Я нашел законное применение для !important и хотел поделиться им.