Перекрытие встроенных стилей во внешнем файле Автор: Натали Джост

CSS Техника

Любопытная техника, позволяющая перекрывать (override) встроенные (inline) стили во внешних CSS-файлах

Перевод: Александр Макаров, http://rmcreative.ru/

Да, вам не показалось: я действительно сказала «встроенных» (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: “<��������������������������

���от сегодня, во время просмотра «Хроник Нарнии» (кто б подумал) с девочками, я подумала, что таким способом я могу решить мою проблему с перекрытием стилей. Во время выполнения заказа я опробовала данный метод и к его сдаче я созрела для этого поста.

А что с кроссбраузерностью?

Конечно же, как и в случае со ссылками, который был описан, способ работает почти везде, но только не в IE6 IE любой версии. Читатели указали, что способ, приведённый в комментариях, будет работать в IE 7 и IE8.

Замечательно работает в

• Safari 3 Mac
• Firefox 1.5 Mac and PC
• Opera 9.5
• IE 7
• IE 8
• Как обычно
• IE6

Заключение

Данный способ — не панацея от всех бед, а просто дополнительная техника, которая может вам пригодиться и, я надеюсь, вы найдёте ей какое-либо полезное применение.

Если данный приём вам не по душе и противоречит вашему отношению к стандартам, простите меня, я очень люблю, когда всё под контролем.

---

UPD от редакции CSSBLAST: если кому-то будет не лень изобрести вариант, работающий в IE 6 — бросайте, добавим!

Оригинал статьи → http://www.standardsforlife.com/override-inline-styles-from-the-stylesheet/

Написать комментарий