Я создаю мобильный симулятор, который высмеивает внешний вид и функциональность iPhone (и других устройств позже) в веб-браузере, используя 100% javascript, HTML5 и CSS, при этом симулятор полностью функциональен только с клиентским кодом.
При попытке выполнить эту задачу с минимальными изменениями, необходимыми для первоначальных проектов приложений, которые будут размещены в симуляторе, я вставляю теги <script> и <link> в начало страницы, а затем загружаю html в экран <div>.
Проблема заключается в том, что когда я загружаюсь в новый файл css, он (очевидно) переопределяет ту, которую я использую для стилизации страницы, и для этого затрагиваются некоторые элементы (например, цвет фона меняется).
Мой вопрос: есть ли способ ограничить "область" внешнего файла .css, применимого только к объектам на экране <div>? Не имеет значения, если вместо того, чтобы я вставлял его в <head> страницы, я вставляю его в элемент <style> на экране <div>?
ОБНОВЛЕНИЕ. Поддержка этой функции была удалена. Ищите другие варианты.
Оригинальное сообщение:
Возможно, вам захочется взглянуть на облачные стили; см. http://css-tricks.com/saving-the-day-with-scoped-css/.
Основная идея
<div>
<style scoped>
@import "scoped.css";
</style>
</div>
Однако вы находитесь на грани кровопролития здесь с точки зрения поддержки браузера. См. http://caniuse.com/style-scoped.
Один вариант - использовать iframe.
Просто оберните весь код css внутри селектора для родительского элемента, скажем, что div с идентификатором foo вы бы сделали следующее:
div#foo{
//All your css
}
И преобразуйте его как less в css с помощью инструмента, такого как http://less2css.org/, он добавит правильные селекторы. Обратите внимание, что вам нужно будет позаботиться о таких вещах, как @media и т.д.
При написании этого, команда <style scoped> устарела командой Chrome.
В результате я экспериментировал с некоторыми подходами и выпустил https://github.com/thgreasi/jquery.scopeLinkTags.
Примечание. Вы должны использовать этот подход только в том случае, если вы не можете управлять импортированным файлом CSS. Если вы можете использовать SASS/LESS/anything для предварительной обработки вашего CSS, вы должны предпочесть это.
Простым способом является добавление перед классом перед каждым селектором в файле css.
Я нахожу, что grunt script может сделать это: