<s>: Das Durchstreichungselement
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Das <s>
HTML-Element rendert Text mit einem Durchstrich oder einer Linie durch den Text. Verwenden Sie das <s>
-Element, um Dinge darzustellen, die nicht mehr relevant oder nicht mehr korrekt sind. Jedoch ist <s>
nicht geeignet, um Dokumentenänderungen anzuzeigen; dafür verwenden Sie die <del>
und <ins>
Elemente, wie es passend ist.
Probieren Sie es aus
<p><s>There will be a few tickets available at the box office tonight.</s></p>
<p>SOLD OUT!</p>
/* stylelint-disable-next-line block-no-empty */
s {
}
Attribute
Dieses Element enthält nur die globalen Attribute.
Zugänglichkeit
Die Präsenz des s
-Elements wird von den meisten Vorlesetechnologien in ihrer Standardkonfiguration nicht angesagt. Es kann jedoch durch die Verwendung der CSS-Eigenschaft content
, zusammen mit den Pseudo-Elementen ::before
und ::after
, angesagt werden.
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 Ansagen von Inhalten, die zusätzliche Weitschweifigkeit erzeugen. Aus diesem Grund ist es wichtig, diese Technik nicht zu missbrauchen und sie nur in Situationen anzuwenden, in denen das Nichtwissen, dass Inhalte durchgestrichen sind, das Verständnis 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 | Phrasierungsinhalt, Flussinhalt. |
---|---|
Erlaubte Inhalte | Phrasierungsinhalt. |
Tag-Weglassung | Keine, sowohl das Start- als auch das Endtag sind erforderlich. |
Erlaubte Eltern | Jedes Element, das Phrasierungsinhalt akzeptiert. |
Implizite ARIA-Rolle |
deletion
|
Erlaubte ARIA-Rollen | Beliebig |
DOM-Schnittstelle | [`HTMLElement`](/de/docs/Web/API/HTMLElement) |
Spezifikationen
Specification |
---|
HTML # the-s-element |
Browser-Kompatibilität
Siehe auch
- Das
<strike>
-Element, der Alter Ego des<s>
-Elements, ist veraltet und sollte auf Webseiten nicht mehr verwendet werden. - Das
<del>
-Element sollte verwendet werden, wenn Daten gelöscht wurden. - Die CSS-Eigenschaft
text-decoration-line
sollte verwendet werden, um den früheren visuellen Aspekt des<s>
-Elements zu erreichen.