(X)HTML: Updates dekorieren mit CSS
Von Zeit zu Zeit ergibt sich bei einer Webseite die Notwendigkeit, neue Informationen einzupflegen. HTML enthält hierfür die Elemente <del> und <ins>, die im Browser üblicherweise als durchge- bzw. unter-strichen dargestellt werden. Vorteil hierbei: Die Informationen werden semantisch markiert und sind so z.B. auch für Suchmaschinen als Veränderungen erkennbar.
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.