<del>: 已刪除文字元素

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

<del> HTML 元素表示文件中已刪除的文字範圍。例如,這可用於渲染“更改跟蹤”或原始碼差異資訊。 <ins> 元素可用於相反的目的:指示已新增到文件中的文字。

試一試

<blockquote>
  There is <del>nothing</del> <ins>no code</ins> either good or bad, but
  <del>thinking</del> <ins>running it</ins> makes it so.
</blockquote>
del {
  text-decoration: line-through;
  background-color: #ffbbbb;
  color: #555555;
}

ins {
  text-decoration: none;
  background-color: #d4fcbc;
}

blockquote {
  padding-left: 15px;
  border-left: 3px solid #d7d7db;
  font-size: 1rem;
}

此元素通常(但不必須)透過對文字應用刪除線樣式來呈現。

屬性

此元素的屬性包括全域性屬性

cite

一個解釋更改的資源的 URI(例如,會議記錄)。

datetime

此屬性指示更改的時間和日期,必須是有效的日期字串,可選擇包含時間。如果該值無法解析為帶有可選時間的日期字串,則該元素沒有關聯的時間戳。有關不帶時間的字串的格式,請參閱 日期字串。包含日期和時間的字串格式在 本地日期和時間字串 中介紹。

無障礙

在大多數螢幕閱讀器技術的預設配置中,del 元素的存在不會被播報。可以透過使用 CSS content 屬性,以及 ::before::after 偽元素使其被播報。

css
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] ";
}

一些使用螢幕閱讀器的使用者會故意停用播報會產生額外冗餘的內容。因此,重要的是不要濫用此技術,只在不瞭解內容已被刪除會不利於理解的情況下應用它。

示例

html
<p><del>This text has been deleted</del>, here is the rest of the paragraph.</p>
<del><p>This paragraph has been deleted.</p></del>

結果

技術摘要

內容類別 措辭內容流內容
允許內容 透明.
標籤省略 無,起始標籤和結束標籤都必須存在。
允許父級 任何接受短語內容的元素。
隱式 ARIA 角色 刪除
允許的 ARIA 角色 任意
DOM 介面 HTMLModElement

規範

規範
HTML
# the-del-element

瀏覽器相容性

另見

  • <ins> 元素用於文字中的插入內容
  • <s> 元素用於刪除線,與表示文字刪除分開