<del>: Das Deleted Text Element

Probieren Sie es aus

<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;
}

Dieses Element wird oft (aber nicht zwingend) durch das Anwenden eines Durchstreich-Stils auf den Text dargestellt.

Attribute

Die Attribute dieses Elements umfassen die globalen Attribute.

cite

Eine URI für eine Ressource, die die Änderung erklärt (zum Beispiel Sitzungsprotokolle).

datetime

Dieses Attribut gibt die Zeit und das Datum der Änderung an und muss eine gültige Datumszeichenfolge mit optionaler Zeit sein. Wenn der Wert nicht als Datum mit einer optionalen Zeitzeichenfolge geparst werden kann, hat das Element keinen zugeordneten Zeitstempel. Das Format der Zeichenfolge ohne Zeit finden Sie unter Datumszeichenfolgen. Das Format der Zeichenfolge, wenn es sowohl Datum als auch Zeit beinhaltet, wird in Lokale Datums- und Zeitzeichenfolgen behandelt.

Barrierefreiheit

Das Vorhandensein des del-Elements wird in den meisten Bildschirmlesetechnologien in ihrer Standardkonfiguration nicht angekündigt. Es kann durch Verwendung der CSS content-Eigenschaft zusammen mit den ::before und ::after Pseudo-Elementen angekündigt werden.

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

Manche Menschen, die Bildschirmleser verwenden, deaktivieren absichtlich die Ankündigung von Inhalten, die zusätzliche Wortlast schaffen. Daher ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen der fehlende Hinweis auf gelöschte Inhalte das Verständnis beeinträchtigen würde.

• Short note on making your mark (more accessible) | Vispero
• Tweaking Text Level Styles | Adrian Roselli

Beispiele

<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>

Ergebnis

Technische Zusammenfassung

Spezifikationen

Browser-Kompatibilität

Siehe auch

• <ins>-Element für Einfügungen in einen Text
• <s>-Element für Durchstreichungen, die nicht das Löschen von Text darstellen