Textänderungen dekorieren mit CSS
Änderungen in HTML-Dokumenten werden durch die Tags <del> und <ins> ausgezeichnet. Standardmäßig werden diese vom Browser durch- bzw. unterstrichen angezeigt. Problematisch ist Letzteres, da Unterstreichungen typischerweise auf Hyperlinks hinweisen. Bei komplett unterstrichene Absätzen leidet zudem die Lesbarkeit.
Dabei geht es optisch durchaus besser: heise online etwa umklammert Textänderungen und stellt längeren Hinzufügungen die Anmerkung „Update:“ voran – bei mehreren Überarbeitungen sogar durchnummeriert. Ein Beispiel hierfür ist die Berichterstattung zum datenschutzschonendenfreundlichen Facebook-Button.
Heise online erledigt dies serverseitig und gibt entsprechend verändertes HTML zurück. Machbar ist die Dekoration jedoch auch ohne zusätzliche Programmlogik — unter Nutzung der CSS-Pseudo-Elemente ::before und ::after sowie des content-Attributs. Mit diesen ist es nämlich möglich, dem Seitenlayout vollkommen neue Elemente hinzuzufügen.
Befinden sich etwa innerhalb eines <article>-Elements mehrere Absätze (<p>), fügt die CSS-Anweisung article > ins > p:first-child::before { content: "Nachtrag: " } vor dem ersten Absatz jeder eingefügten Textstelle einen entsprechender Hinweis ein. Auf ähnliche Weise lassen sich Änderungen innerhalb von Absätzen und mehrere Absätze umfassende Einfügungen mit (halben) eckige Klammern umgeben.
Die noch fehlende Nummerierung der Änderungen erfolgt mit CSS-Zählern; Peter Kröner hat das schon einmal erklärt. Am Ende steht eine wesentlich hübscheres und nützlicheres Dekoration für Änderungen in HTML-Dokumenten.
Ebenfalls interessant ist diese Javascript-Technik zum dynamischen Anzeigen von Textänderungen.