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.

Toto chování lze napodobit prostřednictvím kaskádových stylů. Stačí si definovat třídy pro vymazaný (zde třída del) a přidaný (třída ins) text, například následovně:

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

Zařazením do jedné z těchto tříd (prostřednictvím neutrálního řádkového prvku <span> 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><span class="del">Vy zatracený zmetku</span><span class="ins">Vážený
pane</span>,</p>

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

Je třeba dát ale pozor na dvě věci:

• Klient, který nepodporuje CSS, zobrazí vymazaný i přidaný text stejně a výsledkem bude mišmaš. Je třeba na to přinejmenším upozornit a zdůraznit, že stránka vyžaduje podporu vizuálních kaskádových stylů.
• Vzhled vloženého textu koliduje s obvyklou úpravou odkazů. Je třeba jedno nebo druhé změnit. Proto jsem odkazy udělal tučné a zelené.

zpět: CSS – vlastnost font