Question

我的页面上有一个大型HTML结构，我希望其中一个元素（id="myStyle"）不受外部所有CSS的影响。该元素的内部HTML是从自定义编辑器（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>

这是一个例子，而不是我的实际HTML。 ul样式适用于id="myStyle"内部或外部。

我见过很多解决方案。其中一个最好的方法是将并行CSS应用于#myStyle。

但我正在尝试使用iframe：

创建CSS边界

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>

这项工作正常，但我有疑问：是否有任何风险或任何性能问题？或者这被认为是好的吗？

Answer 1

首先：

是否有任何性能问题？

我认为iframe的开销比简单的div DOM更大，但我对CSS实现一无所知，所以我在这里可能完全错了。

其次，validate您的代码产生两个错误，其中一个是src的{{1}}属性。

另外，iframe？这真的有效吗？我找不到任何提及它的文件。最重要的是，JavaScript不支持多行字符串而且还有另外两个错误：

src="javascript:'...'"

onload='javascript:resizeIframe(this);'已包含JavaScript，因此onload会触发语法错误，但似乎至少Chrome会忽略它。
javascript:未在任何地方定义，导致JavaScript resizeIframe。

我必须说，我很惊讶它的确有效。

创建内联框架的“正确方法”（如果有这样的事情）是使用data: URI scheme，如

ReferenceError

或

<iframe style="border: none; width:50%;" scrolling="no" id="iframe" src="data:text/html;charset=UTF-8,%3C!DOCTYPE%20html%3E%3Chtml%3E%3Cbody%3E%3Cul%3E%3Cli%3EStyle%20none%201%3C/li%3E%3Cli%3EStyle%20none%202%3C/li%3E%3Cli%3E%20Style%20none%203%3C/li%3E%3Cli%3E%20Style%20none%204%3C/li%3E%3C/ul%3E%3C/body%3E%3C/html%3E">

您可以使用<iframe style="border: none; width:50%;" scrolling="no" id="iframe" src="data:text/html;base64,PCFET0NUWVBFIGh0bWw+PGh0bWw+PGJvZHk+PHVsPjxsaT5TdHlsZSBub25lIDE8L2xpPjxsaT5TdHlsZSBub25lIDI8L2xpPjxsaT4gU3R5bGUgbm9uZSAzPC9saT48bGk+IFN0eWxlIG5vbmUgNDwvbGk+PC91bD48L2JvZHk+PC9odG1sPg==">或,获取uncodeURI(str)之后使用JavaScript的部分，其中btoa(str)是包含str内容的字符串}。

请注意，在HTML 5中，iframe已被删除，其排序替换seamless（当时仅由one single android browser支持）将无法真正做到您想要的，因为它将从父页面继承CSS（另请参阅this question）。

那么，对于你的问题

是否有风险[...]？

关于你的代码，是的。多个，实际上。

使用无效代码的风险是浏览器可能不理解它。
有一系列缺点框架，请参阅Wikipedia。
用户浏览器不支持框架的风险（虽然我现在很长时间没有听说过任何此类浏览器）。
用户浏览器不支持JavaScript或禁用JavaScript的风险。

如果您只有scrolling手动重置（div）所设置的样式属性，那么所有这些“风险”都将消失。
我也认为这是一个更清洁的解决方案，但这只是我的意见。

您可能还想查看Shadow DOM，尽管再次browser support has not really arrived yet。

Answer 2

我对你提供的示例有点困惑，但是如果我理解你正确你想要将样式设置为所有div除了具有该ID的那个。

如果是这种情况，您可以使用：

div:not(#myStyle) {
   ...code for all divs except #myStyle...
}

你可以尽可能地：

*:not(#myStyle) {
    ...code for ALL elements, except #myStyle...
}

Answer 3

CSS3关键字initial，它将CSS3属性设置为规范中定义的初始值。

因此，除非完全支持所有浏览器，否则您可以通过以下方式将某些CSS属性重置为其初始值：

.reset-this {
animation : none;
animation-delay : 0;
animation-direction : normal;
animation-duration : 0;
animation-fill-mode : none;
animation-iteration-count : 1;
animation-name : none;
animation-play-state : running;
animation-timing-function : ease;
backface-visibility : visible;
background : 0;
background-attachment : scroll;
background-clip : border-box;
background-color : transparent;
background-image : none;
background-origin : padding-box;
background-position : 0 0;
background-position-x : 0;
background-position-y : 0;
background-repeat : repeat;
background-size : auto auto;
border : 0;
border-style : none;
border-width : medium;
border-color : inherit;
border-bottom : 0;
border-bottom-color : inherit;
border-bottom-left-radius : 0;
border-bottom-right-radius : 0;
border-bottom-style : none;
border-bottom-width : medium;
border-collapse : separate;
border-image : none;
border-left : 0;
border-left-color : inherit;
border-left-style : none;
border-left-width : medium;
border-radius : 0;
border-right : 0;
border-right-color : inherit;
border-right-style : none;
border-right-width : medium;
border-spacing : 0;
border-top : 0;
border-top-color : inherit;
border-top-left-radius : 0;
border-top-right-radius : 0;
border-top-style : none;
border-top-width : medium;
bottom : auto;
box-shadow : none;
box-sizing : content-box;
caption-side : top;
clear : none;
clip : auto;
color : inherit;
columns : auto;
column-count : auto;
column-fill : balance;
column-gap : normal;
column-rule : medium none currentColor;
column-rule-color : currentColor;
column-rule-style : none;
column-rule-width : none;
column-span : 1;
column-width : auto;
content : normal;
counter-increment : none;
counter-reset : none;
cursor : auto;
direction : ltr;
display : inline;
empty-cells : show;
float : none;
font : normal;
font-family : inherit;
font-size : medium;
font-style : normal;
font-variant : normal;
font-weight : normal;
height : auto;
hyphens : none;
left : auto;
letter-spacing : normal;
line-height : normal;
list-style : none;
list-style-image : none;
list-style-position : outside;
list-style-type : disc;
margin : 0;
margin-bottom : 0;
margin-left : 0;
margin-right : 0;
margin-top : 0;
max-height : none;
max-width : none;
min-height : 0;
min-width : 0;
opacity : 1;
orphans : 0;
outline : 0;
outline-color : invert;
outline-style : none;
outline-width : medium;
overflow : visible;
overflow-x : visible;
overflow-y : visible;
padding : 0;
padding-bottom : 0;
padding-left : 0;
padding-right : 0;
padding-top : 0;
page-break-after : auto;
page-break-before : auto;
page-break-inside : auto;
perspective : none;
perspective-origin : 50% 50%;
position : static;
/* May need to alter quotes for different locales (e.g fr) */
quotes : '\201C' '\201D' '\2018' '\2019';
right : auto;
tab-size : 8;
table-layout : auto;
text-align : inherit;
text-align-last : auto;
text-decoration : none;
text-decoration-color : inherit;
text-decoration-line : none;
text-decoration-style : solid;
text-indent : 0;
text-shadow : none;
text-transform : none;
top : auto;
transform : none;
transform-style : flat;
transition : none;
transition-delay : 0s;
transition-duration : 0s;
transition-property : none;
transition-timing-function : ease;
unicode-bidi : normal;
vertical-align : baseline;
visibility : visible;
white-space : normal;
widows : 0;
width : auto;
word-spacing : normal;
z-index : auto;
}

使用iframe作为“CSS边界”被认为是好的吗？

3 个答案: