Перекрытие встроенных стилей во внешнем файле
21 июля 2008
Любопытная техника, позволяющая перекрывать (override) встроенные (inline) стили во внешних CSS-файлах.
Перевод мой. Впервые опубликован на CSSBlast.
Оригинал: Override Inline Styles from the Stylesheet
Да, вам не показалось: я действительно сказала «встроенных» (inline) и нет, я ничего не курила. Долгое время меня раздражало, что никак нельзя перекрыть (override) правила, которые кто-то встроил в код. Я понимаю, что это сделано именно для перекрытия глобального стиля, но также я думаю, что должен быть способ переопределить то, что перекрыто в случае злоупотребления.
А зачем вообще что-то перекрывать?
По большей части это просто любопытство и мой подход к любому делу: «смогу ли я это сделать», но у меня за время работы было несколько заказчиков, которые любили добавлять «красивости» в своих статьях. Один вставлял яркий зелёный абзац, центрированный и набранный неким шрифтом вроде comic sans, другой использовал h1 для того, чтобы сделать текст большим и после задавал ему яркий цвет. Всё это, конечно же, отображалось в моём красивом шаблоне, который я для них создала (и за который они заплатили).
Если честно, в большинстве подобных случаев, всю работу делает CMS. Пользователи лишь нажимают кнопку, чтобы увеличить элемент или задать ему какой-нибудь цвет и Wordpress (чаще всего) или другая CMS сама добавляет span с необходимым стилем. Иногда CMS добавляет стили заголовку или абзацу, но в большинстве случаев приведённый код решит (или предотвратит) проблему:
/* override inline styles */ span[style^=""]{ color: inherit !important; font-size: inherit !important; }
Обновление: Стюарт и Джон рассказали, что просто [style] также сработает в IE7 и 8! — в комментариях вы можете найти ещё больше советов и улучшений данного решения. Хорошее универсальное решение предложил Нэйтан:
/* override inline styles */ span[style]{ color: inherit !important; font-size: inherit !important; }
Пояснения
Первая строчка говорит браузеру (если он, конечно, понимает) найти любой элемент span c атрибутом style, который содержит что-либо [style содержит что-либо ^=«„] и после этого применить к нему правило {.
Далее, я говорю ему наследовать цвет и размер шрифта от родительского. Браузер (умный) будет идти назад по каскаду, найдёт каждый стилизованный элемент с указанным цветом или размером шрифта и применит заданные нами значения. Объявляя элемент !important я говорю браузеру игнорировать всё, кроме моего правила.
Конечно, вам может понадобиться заменить span на любой другой элемент, к которому могут применяться стили. Для этого мы можем таким же способом перекрыть любой атрибут любого элемента на странице, ведь так?
Как я к этому пришла
Я использую данный способ для ссылок уже несколько лет. Не помню, где я его увидела, но изначально он применялся для того, чтобы задать стиль для внешних ссылок. Конструкция a[href^=“http://»] даёт вам возможность задать стили внешним ссылкам отдельно, если все ваши внутренние ссылки относительные.
Затем я увидела данный приём ещё раз примерно в тоже время. Он использовался на A List Apart для вывода адреса ссылки в стилях для печати:
.storycontent a[href]:after { content: “<” attr(href) “>”; font-size: 85%; text-decoration:none; }
И вот сегодня, во время просмотра «Хроник Нарнии» (кто б подумал) с девочками, я подумала, что таким способом я могу решить мою проблему с перекрытием стилей. Во время выполнения заказа я опробовала данный метод и к его сдаче я созрела для этого поста.
А что с кроссбраузерностью?
Конечно же, как и в случае со ссылками, который был описан, способ работает почти везде, но только не в IE6 IE любой версии. Читатели указали, что способ, приведённый в комментариях, будет работать в IE 7 и IE8.
Замечательно работает в
— Safari 3 Mac
— Firefox 1.5 Mac and PC
— Opera 9.5
— IE 7
— IE 8
Как обычно в
— IE6
Заключение
Данный способ — не панацея от всех бед, а просто дополнительная техника, которая может вам пригодиться и, я надеюсь, вы найдёте ей какое-либо полезное применение.
Если данный приём вам не по душе и противоречит вашему отношению к стандартам, простите меня, я очень люблю, когда всё под контролем.
Комментарии RSS по email OK
заметна ненависть к ИЕ автором)
Спасибо огромное! Работая с WP очень помогает