I a large HTML structure on my page, and I want one of the elements (id="myStyle") to be unaffected by all CSS from outside. The inner HTML of this element is loaded from a custom editor (ckeditor).
HTML:
body, html, *{margin:0px; padding:0px;}
ul{list-style: none;color:red;}<html>
<head>
<title>MY Page</title>
</head>
<body>
<div>
<ul>
<li> Style apply 1</li>
<li> Style apply 2</li>
<li> Style apply 3</li>
<li> Style apply 4</li>
</ul>
<div id="myStyle">
<ul>
<li> Style none 1</li>
<li> Style none 2</li>
<li> Style none 3</li>
<li> Style none 4</li>
</ul>
</div>
</div>
</body>
</html>This is an example, not my actual HTML. Here the ul style applies for both inside or outside of id="myStyle".
I have seen lots of solutions. One of the best is to apply parallel CSS to #myStyle.
But I am trying to create a CSS boundary by using an iframe:
body, html, *{margin:0px; padding:0px;}
ul{list-style: none;color:red;}<html>
<head>
<title>MY Page</title>
<style>
body, html, *{margin:0px; padding:0px;}
ul{list-style: none;color:red;}
</style>
</head>
<body>
<div>
<ul>
<li> Style apply 1</li>
<li> Style apply 2</li>
<li> Style apply 3</li>
<li> Style apply 4</li>
</ul>
<div id="myStyle">
<iframe onload='javascript:resizeIframe(this);' scrolling="no" id="iframe" src="javascript: '<!DOCTYPE html><html>
<body>
<ul>
<li> Style none 1</li>
<li> Style none 2</li>
<li> Style none 3</li>
<li> Style none 4</li>
</ul>
</body>
</html>'" style="border: none; width:50%;">
</iframe>
</div>
</div>
</body>
</html>This is working fine, but I have question: Is there any risk or any performance issue? Or is this considered alright?
