2

I am building a html editor for a site. I need to preview how the HTML just typed by the user will look in the destination site, so I need to load that sites stylesheets, but I only want those stylesheets to effect content within the Div.

I have no access to edit the stylesheets to make them specific for that div.

So my code needs to work as follows:

<div style="/styles/public1.css">
New HTML
</div>

I can load the stylesheet outside of the div but that would override my own sites stylesheets, so is no good.

Is there a way of quarantining a stylsheet to just effect the contents inside my div?

user2135998
  • 29
  • 1
  • 2
  • that go against all the ideia of css, but if you really need it, you can use !important on each of yours tag(too much work though) – Toping Mar 05 '13 at 14:05
  • If you can modify the HTML, then just add a class or an ID and then use inline styling above... – Michael Mar 05 '13 at 14:10
  • This question has been asked a dozen times if not more. Please search more thoroughly on SO before posting. See http://stackoverflow.com/questions/7841172/can-you-scope-css-files-so-that-they-only-apply-to-the-descendants-of-a-given-el, http://stackoverflow.com/questions/17667874/limit-scope-of-external-css-to-only-a-specific-element/17668004#17668004, http://stackoverflow.com/questions/26263616/link-external-css-file-only-for-specific-div/26264176#26264176, etc. –  Oct 15 '14 at 03:24

2 Answers2

1

It is impossible to load a stylesheet by pointing 'style' attribute to a file location. See W3C documentation for more information.

You want probably to use 'iframe' for your purposes. Just point <iframe> to the HTML document you're editing. It would be allowed to apply any stylesheets, just like the regular web page.

kamituel
  • 34,606
  • 6
  • 81
  • 98
1

This unfortunately is not possible. A work around that may be sufficient is to prefix all your styles with a selector, for example

#destination body { /* */ }
#destination li { /* */ }
/* etc. */

There is also a nifty feature coming up in CSS3 which isn't widely supported by browsers yet called "scoped" CSS. This is CSS defined within an element that only to the parent element and its children.

<div>
    <style scoped>
        p { font-weight: bold; }
    </style>
    <p>Bold text</p> 
</div>
<p>Normal text</p>

Alternatively you can load a webpage within a webpage with the <iframe> element. 

<iframe src="http://www.google.com"></iframe>

References

Daniel Imms
  • 47,944
  • 19
  • 150
  • 166
  • Not sure what you mean by "siblings"--actually, it applies to the **parent** of the `style` element and all its children. –  Oct 15 '14 at 03:26
  • @torazaburo the spec may have changed since I wrote this, what's your source? – Daniel Imms Oct 15 '14 at 15:00
  • See http://www.w3.org/wiki/HTML/Elements/style. "scoped = boolean. Indicates that the specified style information is meant to apply only to the style element’s **parent element**, and that element’s child nodes." –  Oct 15 '14 at 15:26
  • Updated with a link to 5.1 nightly spec. – Daniel Imms Oct 15 '14 at 16:24