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

Перевод: Александр Макаров, 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 — бросайте, добавим!
Написать комментарий
Комментарии (0)