Ограничить объем внешнего css только конкретным элементом?

Я создаю мобильный симулятор, который высмеивает внешний вид и функциональность iPhone (и других устройств позже) в веб-браузере, используя 100% javascript, HTML5 и CSS, при этом симулятор полностью функциональен только с клиентским кодом.

При попытке выполнить эту задачу с минимальными изменениями, необходимыми для первоначальных проектов приложений, которые будут размещены в симуляторе, я вставляю теги <script> и <link> в начало страницы, а затем загружаю html в экран <div>.

Проблема заключается в том, что когда я загружаюсь в новый файл css, он (очевидно) переопределяет ту, которую я использую для стилизации страницы, и для этого затрагиваются некоторые элементы (например, цвет фона меняется).

Мой вопрос: есть ли способ ограничить "область" внешнего файла .css, применимого только к объектам на экране <div>? Не имеет значения, если вместо того, чтобы я вставлял его в <head> страницы, я вставляю его в элемент <style> на экране <div>?

Ответ 1

ОБНОВЛЕНИЕ. Поддержка этой функции была удалена. Ищите другие варианты.

Оригинальное сообщение:

Возможно, вам захочется взглянуть на облачные стили; см. http://css-tricks.com/saving-the-day-with-scoped-css/.

Основная идея

<div>
    <style scoped>
        @import "scoped.css";
    </style>
</div>

Однако вы находитесь на грани кровопролития здесь с точки зрения поддержки браузера. См. http://caniuse.com/style-scoped.

Один вариант - использовать iframe.

Ответ 2

Просто оберните весь код css внутри селектора для родительского элемента, скажем, что div с идентификатором foo вы бы сделали следующее:

div#foo{
//All your css
}

И преобразуйте его как less в css с помощью инструмента, такого как http://less2css.org/, он добавит правильные селекторы. Обратите внимание, что вам нужно будет позаботиться о таких вещах, как @media и т.д.

Ответ 3

При написании этого, команда <style scoped> устарела командой Chrome. В результате я экспериментировал с некоторыми подходами и выпустил https://github.com/thgreasi/jquery.scopeLinkTags. Примечание. Вы должны использовать этот подход только в том случае, если вы не можете управлять импортированным файлом CSS. Если вы можете использовать SASS/LESS/anything для предварительной обработки вашего CSS, вы должны предпочесть это.

Ответ 4

Простым способом является добавление перед классом перед каждым селектором в файле css.

Я нахожу, что grunt script может сделать это:

https://github.com/ericf/grunt-css-selectors