如何解决使用内联 CSS 样式缩小/优化/DRY 文档
是否有一些库/工具/算法可以用内联 CSS 样式优化 HTML 文档。例如,对于给定的输入:
<div>
<div>
<span style="font-size:20px;">John</span>
<span style="font-size:20px;">Doe</span>
</div>
<div>
<span style="font-size:20px;">Frank</span>
<span style="font-size:35px;">Westwood</span>
</div>
<div>
<span style="font-size:20px;">Jane</span>
<span style="font-size:25px;">River</span>
Anonymous
</div>
</div>
优化的输出应该是:
<div>
<div style="font-size:20px;">
<span>John</span>
<span>Doe</span>
</div>
<div>
<span style="font-size:20px;">Frank</span>
<span style="font-size:35px;">Westwood</span>
</div>
<div>
<span style="font-size:20px;">Jane</span>
<span style="font-size:20px;">River</span>
Anonymous
</div>
</div>
可以优化带有 John Doe 跨度的第一个 div,并将相同的 20px 字体大小内联指令从跨度转移到父 div。但由于字体大小不匹配或未设置样式的文本节点(匿名),其他两个 div 无法优化。
我想象了一些通用算法,它遍历 DOM 树,从它的叶子开始,在每个级别上将内联 css 样式与所有兄弟姐妹进行比较,所有兄弟姐妹共有的片段从兄弟姐妹转移到他们的父母。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。