Automaticky generovaný obsah v CSS

Pomocí druhé verze kaskádových stylů je možné obsah webových stránek nejenom zkrášlovat, ale též rozšiřovat o další textové prvky. K tomu slouží vlastnost „content“, kterou je možné použít ve speciálních pseudotřídách „:before“ a „:after“.

:před a :za

Prostředky kaskádových stylů není možné libovolně zasahovat kamkoli do obsahu dokumentu, jejich působnost je vždy vymezena počáteční a ukončovací značkou. A právě tato ohraničení představují místa, která lze identifikovat pomocí výše zmíněných pseudotříd. V důsledku tedy můžeme vkládat text před nebo za nějaký element, například takto:

cite:before {content: „Citace: „}

Tato jednoduchá definice vloží před obsah elementu cite text Citace:. Ze zápisu <cite>Myslím, tedy jsem.</cite> v prohlížeči vznikne Citace: Myslím, tedy jsem.. Analogicky funguje i vkládání textu za obsah elementu v pseudotřídě :after, můžeme tak hovořit o generování předpon a přípon k obsahům značek:

cite:after {content: „[konec citace]“}

Možná není bez zajímavosti, že text vkládaný do stránky pomocí stylů je v Mozille snadno odhalitelný – alespoň ve verzi 1.1 jej nelze označit a zkopírovat.

Kterak na vzhled vkládaného textu

Fakt, že vlastnost content nelze použít nikde jinde než v pseudotřídách :before a :after, ještě neznamená, že v těchto pseudotřídách nelze upravovat vzhled vkládaného obsahu. Zejména je možné měnit vlastnosti písma, ale též orámování, barvu pozadí a podobně:

cite:after {content: „[konec citace]“;
    font-size: small;
    background-color: silver;
    border: solid 1px black}

Výchozí zobrazení předpon a přípon je řádkové, tedy odpovídající definici display: inline. Nic nám však nebrání změnit zobrazení třeba na blokové, vkládaný obsah tak bude zobrazen nad, respektive pod příslušným elementem:

cite:before {content: „Citace: „;
    display: block;
    font-height: bolder}

Řetězec vkládaný pomocí vlastnosti content není prohlížečem dále interpretován, pokud bychom se zde pokusili vepsat nějaké značky, jako například cite:before {content: "<a href='odkaz.html'>Citace:</a> "}, zobrazí se předpona přesně v tomto tvaru a nikoli jako odkaz. Výjimku tvoří uvozovky a apostrofy. Pokud potřebujeme zapsat jeden z těchto znaků, kterým zároveň uvozujeme řetězec, je nutné použít zpětné lomítko: \". Samotné zpětné lomítko je tedy třeba zapisovat zdvojeně \\.

Vkládání uvozovek

Hodnotou vlastnosti content nemusí být jen řetězec, přípustné jsou také speciální proměnné a dokonce funkce. (To je v kaskádových stylech vlastně unikátní jev, kterému se budu blíže věnovat v příštím článku.) Těmi speciálními proměnnými jsou open-quote a close-quote, s jejichž pomocí lze poměrně dobře definovat obecný mechanismus vkládání uvozovek:

cite:before {content: open-quote}
cite:after {content: close-quote}

Symboly pro uvozovky se pak definují vlastností quotes, přičemž je možné definici kontextově rozlišit, například podle jazyka:

cite[lang=“cs“] {quotes: ‚„‘ ‚“‘ „‚“ „‘“}
cite[lang=“en“] {quotes: ‚“‘ ‚”‘ „‘“ „’“}

Správné české uvozovky se pak vloží okolo elementu cite, pokud citace bude v HTML zapsána následovně:

<cite lang=“cs“>Myslím, tedy jsem</cite>

Dodejme ještě, že specifikace CSS2 definuje také proměnné no-open-quote a no-close-quote, kterými lze generování uvozovek potlačit. Přesněji řečeno, pokud jsou použity, nevloží se do dokumentu žádný znak, přesto se ale změní úroveň aktuálních uvozovek. Mějme například uvozovky definovány již na úrovni odstavce a zároveň kolem něj vložme „prázdné“ uvozovky:

p {quotes: ‚„‘ ‚“‘ „‚“ „‘“}
p:before {content: no-open-quote}
p:after {content: no-close-quote}
cite:before {content: open-quote}
cite:after {content: close-quote}

Bude-li zdrojový kód HTML <p><cite>Myslím, tedy jsem</cite></p>, měl by prohlížeč zobrazit citát s uvozovkami druhé úrovně, tedy podle naší definice ‚Myslím, tedy jsem‘. Z testovaných prohlížečů to ovšem zvládá pouze Opera.

Podpora pseudotříd :before a :after včetně vkládání uvozovek v internetových prohlížečích je snadno identifikovatelná. Internet Explorer ne, Opera (minimálně verze 6.05) ano a Mozilla (minimálně verze 1.1) také ano, s výjimkou uvozovek druhé úrovně (viz poslední příklad).

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.