Я думаю для вас не секрет, что почти у всех современных и популярных браузеров есть дополнения, расширения, аддоны и прочее. С одной стороны, появление всех этих аддонов — хороший знак. Они дополняют новые функции, которых нет в самом браузере. Но как и везде есть и обратная сторона монеты — расширения могут делать практически все, в том числе не до конца поняв что они наделали.
К чему я все это? А к тому, расширения имеют доступ к нашему html файлу, и могу внедрять в него свои стили и js-код. Вреда от js коллизий я пока не замечал, а вот переопределить в расширении стили для html, body — запросто.
Конечно они могут сделать все, что захотят. Но наша задача, сделать так, чтобы они не сломали случайно наш красивенький сайт.
Почему так происходит?
Основной причиной для этого является стилизация страницы настроек для плагина (это касается Google Chrome). Т.к. страница настроек это обычная html страница, то к ней пишут стили для html, body и т.д.
Что чаще всего случайно ломают? Сложно сказать, я замечал в основном только несоответствия по шрифтам и фону.
Что нам со всем этим делать?
Первое что нужно, это переписать свои стили, отвечающие за шрифт и фон для html и body с добавлением !important. К примеру вот так:
html {
background: #fff url(..) no-repeat !important;
font: 14px/1.2 Arial, sans-serif !important;
}
body {
background: inherit !important;
font: inherit !important;
}
Свойство inherit не работает в IE < 8 версии. Поэтому если вы поддерживаете 7 версию этого чудесного браузера, вам нужно будет переписать этот участок кода самому в зависимости от ваших требований.
Это тот необходимый минимум, которого хватает наверное в 90% случаев. А у вас съезжал сайт из-за расширений?
![Код. Плейсхолдер для [contenteditable]](/assets/img/contenteditable.jpg)