奇技淫巧-reset.css重置样式使用之后，如何让富文本区域不受reset.css重置样式影响

前端代码为了方便，一般都会使用 reset.css 重置浏览器的默认样式，或者使用 normalize.css 对默认样式进行统一，让各个浏览器的显示效果统一。

这样做让css样式编辑方便了很多，但由于 css 的继承特性，衍生出了一个问题，如果网站存在富文本编辑发布内容，那么重置样式就有可能会导致富文本中的样式显示不出来。

比如：富文本加粗可能会使用 <strong> 标签，斜体可能会使用 <i> 标签等，如果使用重置样式，就会导致加粗和斜体不显示。

示例

以上效果可以看到使用通配符重置样式之后，编码区域和富文本区域的样式都被重置了。

如何解决

本文介绍三种处理方式：

1. css revert 还原样式
2. shadow root 显示内容
3. iframe 显示内容

一、css revert 还原样式使用方法

* {
  font-weight: normal;
  font-size: 14px;
  font-style: normal;
}
.editor * {
  font-weight: revert;
  font-size: revert;
  font-style: revert;
}

显示效果：

可以看到 富文本区域的 <strong> 标签 和 <i> 标签都恢复成浏览器默认样式了。

• 浏览器兼容性

https://caniuse.com/css-revert-value

二、shadow root 显示内容

MDN文档显示仅有部分元素支持，例如<a>元素就不在支持列表，但是以上效果看到<a>元素还是支持的。

文档链接：https://developer.mozilla.org/en-US/docs/Web/API/Element/attachShadow

以上源码：

<div class="editor" style="margin-top: 1em;"></div>

<script>
  var shadow = document.querySelector(".editor").attachShadow({mode: 'open'});
  var content = document.createElement('div')
  content.innerHTML = `<strong>富文本编辑区域 strong</strong><br>
  <i>富文本编辑区域 i</i><br>
  <a href="/" target="_blank">试试a标签是否无效</a>`
  shadow.appendChild(content)
</script>

• 浏览器兼容性

https://caniuse.com/mdn-api_shadowroot

三、iframe 显示内容

以上源码：

<div class="editor" style="margin-top: 1em;"></div>

<script>
  var container = document.querySelector(".editor");
  var iframe = document.createElement('iframe');
  container.appendChild(iframe)
  iframe.contentDocument.body.innerHTML = `<div id="content">
    <strong>富文本编辑区域 strong</strong><br>
    <i>富文本编辑区域 i</i><br>
    <a href="/" target="_blank">a标签</a>
    </div>`
  iframe.contentDocument.body.setAttribute('style', 'margin: 0; padding: 0')
  var content = iframe.contentDocument.querySelector('#content')
  var height = iframe.contentWindow.getComputedStyle(content).height
  iframe.setAttribute('style', `width: 100%; height: ${height}; border: none;`)
</script>

可以看出iframe显示内容需要经过诸多设置才能有效，包括边框，高度等。

三种方式弊端

1. 如果要兼容低版本浏览器，三种方式中只有 iframe 这种能兼容低版本浏览器。
2. 如果要让搜索引擎爬取，仅有 css revert 这种方式搜索引擎能够爬到。

推荐 css revert 这种方式，毕竟能用 css 干的事，还是让 css 干就行了。

本文由 linx(544819896@qq.com) 创作，采用 CC BY 4.0 CN协议 进行许可。 可自由转载、引用，但需署名作者且注明文章出处。本文链接为： https://blog.jijian.link/2022-06-12/reset-css-revert/

如果您觉得文章不错，可以点击文章中的广告支持一下！