SnareChops SnareChops - 1 year ago 258
CSS Question

Limit scope of external css to only a specific element?

I am creating a mobile simulator that mocks the appearance and functionality of an iPhone (and other devices later) in a web browser, using 100% javascript, HTML5, and CSS, with the simulator fully functional with only client side code.

While trying to accomplish this task with as little modification as necessary to the original app projects themselves to be hosted in the simulator, I am injecting the

tags into the head of the page, then loading the html into a

The problem is that when I load in a new css file, it (obviously) overrides the one I'm using to style the page, and therefor some elements are affected (ex the background changes color).

My question is: Is there any way to limit the "scope" of an external
file to apply only to objects within the
screen? Would it make any difference if instead of me injecting it into the
of the page, I inject it into a
element in the

Simulator project at (code for this injection is in the
if needed)

Thank you, and all ideas welcome.

Answer Source

You may want to look at scoped styles; see

The basic idea is

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

However, you are on the bleeding edge here in terms of browser support. See

One alternative would be to use an iframe.