【问题标题】:Is there a CSS3 Reset?是否有 CSS3 重置?
【发布时间】:2012-06-27 16:25:02
【问题描述】:

我只是想知道是否存在针对 CSS3 的全局 CSS 重置。与Eric MeyerYUI 创建的常用版本类似,但专门针对CSS3。我在 SO 上查询过 Google、Github 和 here 等渠道,但没有找到全面的解决方案。

编辑: 术语“重置”可能具有误导性,因为它主要涉及重置浏览器默认设置。 “重新校准”可能更适合。

我应该澄清并提出一个用例。

这将与正常的 CSS 重置一起工作,但也可以处理由旋转、框阴影、动画、边框半径等引起的任何样式。例如,如之前在 this post 中提到的:

-webkit-transform:none; /* Safari and Chrome */
-moz-transform:none; /* Firefox */
-ms-transform:none; /* IE 9 */
-o-transform:none; /* Opera */
transform:none;

上面的 sn-p 和其他类似的,将与任何可能受它们影响的 HTML 标记相关联,就像当前的 CSS 重置一样。

如果您可以控制自己的属性,那么实现此功能的需求可能不会太普遍。但是,例如,如果您正在创建将在不同域中使用的应用程序或插件,其中调用插件脚本的页面样式会影响插件本身的样式,那么类似这将非常有用。

我知道还有其他方法可以驯服 CSS 继承和处理跨域问题,但这个问题是关于 CSS3 重置直接提出的。

非常感谢。

【问题讨论】:

  • 好像前缀本身还不够笨重……
  • 是否有任何标签默认设置 CSS 转换?我不明白为什么要重置这种东西。
  • 我看不出这会有什么帮助。你为什么要这个?找不到现有解决方案可能是有原因的......
  • 我同意@bfavaretto ...我认为这没有必要。您是否有需要重置这些样式的问题?
  • 我同意你们每个人的观点,在我的特殊情况下,我们有一个脚本可以在 iframe 中生成 html,可以在任何地方运行,我只是手动创建了重置。是的 - 像盒子阴影和变换之类的东西正在影响 iframe 本身,这让我想知道是否还有其他更全面的解决方案,可以捕捉我可能无意中遗漏的 CSS3 行为。

标签: css css-reset


【解决方案1】:

解决问题的真正方法是使用scoped 属性,或者使用Shadow DOM 创建小部件。

这样,您可以将自己与外部 CSS 隔离开来。不幸的是,两者都没有真正准备好使用,所以是的,你必须手动保护自己。

另一种方法是使用 !important 在代码中设置所有内容(转换、字体大小、填充等),而不是将其重置为 0/none,然后重新设置。

【讨论】:

  • 很有启发性。 Shadow DOM 和作用域属性 - 必须研究这些并在它们稳定时实施。谢谢。