Limit scope of external css to only a specific element?

Question

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 <script> and <link> tags into the head of the page, then loading the html into a <div> screen.

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 .css file to apply only to objects within the <div> screen? Would it make any difference if instead of me injecting it into the <head> of the page, I inject it into a <style> element in the <div> screen?

Can't you just scope the CSS to specific elements/classes and then change the elements/classes as needed? — matthewpavkov, Jul 16 '13 at 04:21
I could, but then I would have to require all users of the simulator to follow a specific css layout, whereas I am trying to explore options to accomplish the same without any modification to typical css stylings — SnareChops, Jul 16 '13 at 12:25

score 43 · Accepted Answer · edited Jul 26 '16 at 00:53

43

UPDATE Support for this feature has been dropped. Please seek other options

Original Post:

You may want to look at scoped styles; see http://css-tricks.com/saving-the-day-with-scoped-css/.

The basic idea is

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

However, you are on the bleeding edge here in terms of browser support. See http://caniuse.com/style-scoped.

One alternative would be to use an iframe.

edited Jul 26 '16 at 00:53

SnareChops

13,175
9
69
91

answered Jul 16 '13 at 04:27

2

There's a jQuery polyfill for scoped CSS: https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin – matthewpavkov Jul 16 '13 at 13:26
2

Unfortunately, that polyfill does not implement scoped styles correctly, in that it does not apply them to the parent of the `style` element as it should. See https://github.com/thingsinjars/jQuery-Scoped-CSS-plugin/issues/6. – Oct 15 '14 at 03:34
29

For the future reader, scoped styles have been removed from the CSS spec. *Don't use this!* – JakeParis Aug 11 '16 at 16:28

Juan Cortés · Answer 2 · 2018-11-08T22:08:09.043

32

Simply wrap all you css code inside the selector for parent element, say it's a div with id of foo you'd do the following:

div#foo{
//All your css
}

And convert it as less to css, it will prepend the right selectors. Note that you'll need to take care manually of things like @media queries and so on.

edited Nov 08 '18 at 22:08

answered Jun 29 '15 at 12:41

Juan Cortés

20,634
8
68
91

1

You would require all users of the simulator to do the same thing, as mentioned in the comments on the question. – pete the pagan-gerbil Sep 28 '15 at 11:59

Thodoris Greasidis · Answer 3 · 2017-10-30T07:56:00.807

3

While writing this, the <style scoped> is deprecated by the Chrome team. As a result I experimented with some approaches and released https://github.com/thgreasi/jquery.scopeLinkTags . Note: you should only have to use this approach in case that you can't control the imported CSS file. If you can use SASS/LESS/anything to pre-process your CSS, you should prefer that.

edited Oct 30 '17 at 07:56

answered Jun 15 '16 at 05:06

Thodoris Greasidis

547
4
9

1

Anyone know why they deprecated it? Seems like a great idea, no? – Julix Sep 16 '16 at 06:03
1

"due to high code complexity.", see [here](https://www.chromestatus.com/feature/5374137958662144). – yishaiz Dec 22 '16 at 10:31

score 1 · Answer 4 · answered Jul 25 '16 at 06:38

1

A simple way is adding pre-class before all selector in css file.

I find a grunt script can do this:

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

answered Jul 25 '16 at 06:38

Fancyoung

2,313
26
32

score 1 · Answer 5 · answered May 28 '21 at 20:11

This is how i do it if not using preprocessor in my project. Search for a online preprocessor then load copy paste the css under the parent class/id

.parent{
    // copy paste here
}

Example

Find a preprocessor for example https://beautifytools.com/scss-compiler.php works very well for me (I have no affiliation with the given link)
if you are using from a URL add the URL using the load URL button.
Wrap the css code under parent and hit compile then minify.

score 1 · Answer 6 · answered Jan 09 '22 at 15:05

1

I had a similar issue and found that Shadow DOM can solve it easily.

let output = d.querySelector('#output')
let shadow = output.attachShadow({
  mode: 'closed'
});
shadow.innerHTML = HTMLcontent // HTML content and style injected

Source

answered Jan 09 '22 at 15:05

1213

706
2
8
25

Limit scope of external css to only a specific element?

6 Answers6

Example

Linked

Related