使用 HTML5 实现删除线

CSS 非常适合样式设计，但不太擅长表达内容的含义。这就是 HTML 语义标签的作用所在。当你尝试添加删除线时，通常是有原因的。而这个原因可以用合适的 HTML 标签来描述。使用 ` <del><src>` 或 ` <s><src>` 标签来传达你的意图，让你的代码具有语义意义 🙌

<s>Text no longer relevant</s>

文本已失效

<del>Text removed from document</del>

从文档中删除了文本

<s>对比<del>

是的，它们都是删除线。但是，它们表达的含义不同，所以不能互换。你需要选择最能体现你想要表达的意思的那个。我们先从定义开始。

<s>

当你想表达一些不再相关或不再准确的事物时，可以使用这种方法。

✅ 价格折扣就是一个很好的例子

<p><s>$100</s></p>
<p>$999.99</p>

促销中！

100美元
899美元

❌ 但是，在指示文档编辑时，不应使用此标签。这时就需要用到其他标签<del>了。

<del>

当您想表明文档中已删除某些内容时，请使用此功能。

✅ 待办事项清单就是一个很好的例子。

<p>TODO</p>

<ul>
  <li><del>Get a Job</del></li>
  <li>Become a Senior Developer</li>
</ul>

待办事项

• 找份工作
• 成为高级开发人员

规则

我是这样记住该用哪个的：如果内容表示已删除的内容，就用<del>。对于所有其他情况，就用<s>👍。

与<del>​<ins>

我觉得这才是它真正的亮点所在<del>。你可以将它们组合起来使用<ins>，创建一个界面来跟踪和记录文档中发生的更改。

示例：文本编辑器

<p>My name is
  <del>Smanta</del>
  <ins>Samantha</ins>
</p>

我的名字是 斯曼塔  萨曼莎

示例：Git 界面

<table>
  <tr>
    <td><del>+ function TEA() {</del></td>
    <td><ins>- function tea() {</ins></td>
  </tr>
</table>

+  函数 TEA(){- function tea(){

<strike>

你可能见过这个<strike>标签。这实际上是 HTML4 中已弃用的旧标签。它被 HTML5 中引入的语义更恰当的 `<div>`<s>和 ` <del><span>` 标签所取代。

<del>即使在 Internet Explorer 中，` <div>` 标签也<s>得到了很好的支持。虽然某些浏览器可能仍然支持 `<div>`<strike>标签，但最佳实践是避免使用它们🙅‍♀️

无障碍问题

遗憾的是，大多数屏幕阅读器无法读取这些特定的标签。但您可以使用::before属性::after来朗读它们。不过，最好不要滥用此方法，因为有些人会故意禁用朗读功能，以免造成冗长的信息。✨

<del>

del::before,
del::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

del::before {
  content: " [deletion start] ";
}

del::after {
  content: " [deletion end] ";
}

/* MDN */

<s>

s::before, 
s::after {
  clip-path: inset(100%);
  clip: rect(1px, 1px, 1px, 1px);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

s::before {
  content: " [start of stricken text] ";
}

s::after {
  content: " [end of stricken text] ";
}

/* MDN */

社区意见

💬 你见过哪些 HTML 删除线的使用案例？让我们来看看社区是怎么说的👀

• @its4zahoor：我在产品促销的价格折扣页面经常看到这种情况。例如：划掉原价，只显示折扣后的价格。

• @jamielarchin__：在账户创建表单中，如果存在密码字段，请列出密码要求，然后在用户完成每一项要求后将其划掉。

• @kotpes：聊天应用

• @ultrasamad：在已完成的待办事项列表中可以看到

资源

• MDN Web 文档：删除>
• MDN Web 文档：
• Stack Overflow：s 与 del
• Stack Overflow：HTML 中 s 和 del 的区别
• HTML5 Doctor：比较和对比 ins、del 和 s

感谢阅读❤
欢迎关注！Instagram | Twitter | Facebook |博客| SamanthaMing.com