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

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

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

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

示例

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

如何解决

本文介绍三种处理方式:

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

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

1
2
3
4
5
6
7
8
9
10
* {
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

以上源码:

1
2
3
4
5
6
7
8
9
10
<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 显示内容

以上源码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<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 干就行了。

微信浏览器中h5网页如何打开默认浏览器

常见需求:html5 网页在微信中打开的时候,需要下载APP,或者唤起APP,到APP内部去完成部分操作。

常见做法:html5 网页上按钮点击,弹出遮罩层,提示用户点击右上角更多,使用默认浏览器打开,这是大部分网页的常见做法。

阅读全文