Příklad - vyznačení změn

Řada textových editorů dnes dokáže v dokumentu vyznačovat změny, aby čtenář na první pohled viděl, jak byl text upraven. Obvyklou konvencí je vymazané části zobrazit červeně a přeškrtnout, zatímco nově přidané části bývají modré a jsou podtrženy.

V HTML existují pro tento účel prvky <ins> a <del>, kterými lze vyznačit přidané a vymazané pasáže. Výchozí styl v prohlížečích se liší od toho, na co jsme zvyklí z textových editorů, pomocí CSS jej ale můžeme upravit do podoby, na jakou jsme zvyklí:

del {
    color: red;
    text-decoration: line-through;
}
ins {
    color: blue;
    text-decoration: underline;
}

Použitím prvků <ins> a <del> pak docílíte požadovaného vzhledu – například korigovaný začátek určitého dopisu:

Vy zatracený zmetkuVážený pane,

předem mého dopisu bych Vás rád bych Vás upozornil na některé sprosté lžinesrovnalosti ve Vámi poskytnutých materiálech.

zdrojový kód inkriminovaného dopisu by vypadal takto:

<p><del>Vy zatracený zmetku</del><ins>Vážený
pane</ins>,</p>

<p><del>předem mého dopisu bych Vás </del>rád
<ins>bych Vás </ins>upozornil na některé <del>sprosté
lži</del><ins>nesrovnalosti</ins> ve Vámi poskytnutých
materiálech.</p>

Vzhled vloženého textu bohužel koliduje s obvyklou úpravou odkazů. Je třeba jedno nebo druhé změnit. Proto jsem zdejší odkazy udělal tučné a zelené. Druhou možností, kterou používají ve svém výchozím style některé prohlížeče, je místo podtržení a přeškrtnutí používat barevné pozadí – zelené u přidaného textu, červené u vymazaného.

zpět: CSS – další vlastnosti písma