<s> HTML-Durchstreichungselement
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.
Das <s> HTML-Element rendert Text mit einer Durchstreichung, also einer Linie durch den Text. Verwenden Sie das <s>-Element, um Dinge darzustellen, die nicht mehr relevant oder nicht mehr korrekt sind. <s> ist jedoch nicht geeignet, um Dokumentenänderungen anzuzeigen; hierfür verwenden Sie die Elemente <del> und <ins>, je nach Bedarf.
Probieren Sie es aus
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>
s {
/* Add your styles here */
}
Attribute
Dieses Element umfasst nur die globalen Attribute.
Barrierefreiheit
Das Vorhandensein des s-Elements wird in der Standardkonfiguration von den meisten Bildschirmlesegeräten nicht angekündigt. Es kann angekündigt werden, indem die CSS-Eigenschaft content zusammen mit den Pseudoelementen ::before und ::after verwendet wird.
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] ";
}
Einige Personen, die Bildschirmleser verwenden, deaktivieren bewusst das Ankündigen von Inhalten, die zusätzliche Redundanz erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen über durchgestrichene Inhalte das Verständnis nachteilig beeinträchtigen würde.
Beispiele
.sold-out {
text-decoration: line-through;
}
<s>Today's Special: Salmon</s> SOLD OUT<br />
<span class="sold-out">Today's Special: Salmon</span> SOLD OUT
Ergebnis
Technische Zusammenfassung
| Inhaltskategorien | Phrasing-Inhalte, Flow-Inhalte. |
|---|---|
| Erlaubter Inhalt | Phrasing-Inhalte. |
| Tag-Auslassung | Keine, sowohl das Start- als auch das End-Tag sind obligatorisch. |
| Erlaubte Eltern | Jedes Element, das Phrasing-Inhalte akzeptiert. |
| Implizierte ARIA-Rolle |
deletion
|
| Erlaubte ARIA-Rollen | Irgendwelche |
| DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
| Spezifikation |
|---|
| HTML # the-s-element |
Browser-Kompatibilität
Siehe auch
- Das
<strike>-Element, das alter Ego des<s>-Elements, ist veraltet und sollte auf Websites nicht mehr verwendet werden. - Das
<del>-Element sollte verwendet werden, wenn Daten gelöscht wurden. - Die CSS-Eigenschaft
text-decoration-linesollte verwendet werden, um den früheren visuellen Aspekt des<s>-Elements zu erreichen.