Имеем расширение Google Chrome в котором используется Bootstrap и скрипт для создания модальных окон arctic-modals. В итоге на некоторых сайтах неверно отображаются формы расширения. Полагаю что это из-за конфликта CSS стилей, которые нужно инжектить на страницу, чтобы формы выводились через content.js. Есть ли способ избежать этого?
1 ответ
Попробуйте как-то так: скомпилируйте ваши css-файлы, например, с помощью less с уникальным префиксом:
my_chrome_app.less
:
.my-chrome-app {
@import (less) url("bootstrap.css");
}
В результате получится файл, в котором все классы бутстрэпа обёрнуты в родителя .my_chrome_app
:
my_chrome_app.css
:
...
.my_chrome_app .lead {
font-size: 21px;
}
...
А в генерируемых формах весь код нужно обернуть в нужный div.
<div class="my-chrome-app">
<div class="lead">Текст с нашими стилями bootstrap</div>
</div>
Тогда стили из ваших css-файлов будут применяться только к вашим формам. Однако, стили страниц всё равно будут влиять на отображение ваших форм, хотя и будут иметь более низкий приоритет.
Про less: на английском, на русском.
-
Не пользовался less ни разу. Не дадите ссылку где почитать, чтоб сделать так как вы советуете? – Леха 16 окт '15 в 18:15
-
-
Пожалуйста! :) Добавил начальные ссылки для изучения less. Не забудьте отметить вопрос как решение и плюсануть, если он вам помог. – installero 17 окт '15 в 6:02