CODEWITHSUNDEEP
htmlcss
SnareChops
SnareChops

Reputation: 13347

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 <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?

Upvotes: 80

Views: 81806

Answers (7)

justFatLard
justFatLard

Reputation: 526

Here's a neat way you could do this with a little js:

async function loadScopedStyleSheet(scope, url) {
    fetch(url).then(async response => {
        const style = document.createElement('style');

        style.innerHTML = `${scope} { ${await response.text()} }`;

        document.head.append(style);
    });
}

loadScopedStyleSheet('.nes-portal', 'https://unpkg.com/nes.css/css/nes.css');

<div class="nes-portal"><i class="nes-logo"></i></div>

Upvotes: -1

1213
1213

Reputation: 756

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

Upvotes: 2

Sisir
Sisir

Reputation: 2816

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

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

Upvotes: 1

Juan Cort&#233;s
Juan Cort&#233;s

Reputation: 21062

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.

Upvotes: 32

Thodoris Greasidis
Thodoris Greasidis

Reputation: 557

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.

Upvotes: 3

user663031
user663031

Reputation:

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.

Upvotes: 43

Fancyoung
Fancyoung

Reputation: 2423

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

Upvotes: 1

Related Questions