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.

Hier ist die Demo.

Ebenfalls interessant ist diese Javascript-Technik zum dynamischen Anzeigen von Textänderungen.

Doch obwohl aktuelle Blog- bzw. Content-Management-Systeme das Einfügen entsprechender Tags recht einfach machen, scheint sich zumindest in Bezug auf das <ins>-Element ein anderer präsentationaler Ansatz etabliert zu haben. Oft werden Updates nämlich einfach in einem neuen Absatz eingefügt, der mit entsprechendem, oft fett formatierten, Präfix präsentiert vorkommt. (Beispiele: Heise, Netzpolitik, Spreeblick).

Ich vermute, dass dieses unsemantische Markup hauptsächlich verwendet wird, um Änderungen deutlicher kenntlich zu machen – ganz nebenbei bemerkt sehen unterstrichene Absätze auch nicht gerade gut aus. Es liegt also nahe, zu versuchen, beide Lösungen mittels CSS zu vereinen.

Wichtig ist hierbei die, Sonderstellung der beiden Elemente <del> und <ins> zu beachten: Kommen diese innerhalb von Block-Elementen vor, fungieren sie als Inline-Elemente, andererseits können sie als Block-Elemente selber Block-Elemente enthalten. Inline-Änderungsmarkierungen bestehen meistens nur aus wenigen Wörtern, deswegen kann bei ihnen auf eine prominente Auszeichnung verzichtet werden.

Zunächst entledigt man sich also des Standard-Stils für das <ins>-Element, um ihn gleich danach für Elemente, die innerhalb eines Absatzes vorkommen, wieder einzuführen: ins {text-decoration:none;} p ins {text-decoration:underline;}

Nun erhält das erste (Selektor :first-child) unmittelbare (Selektor >) Kindelement eines <ins>-Elements das Update-Präfix. Für inline (d.h. innerhalb eines Absatzes) vorkommende Elemente wird diese Regel dann aufgehoben: ins > :first-child:before {content:"Update: ";font-weight:bold;} p ins > :first-child:before {content:none;}

Die hier vorgestellte, semantisch saubere Lösung setze ich übrigens auch auf diesem Blog ein. Verbesserungsvorschläge in den Kommentaren sind natürlich immer erwünscht.