CSS2 – automaticky generovaný obsah

V jednom z minulých článků jste se mimo jiné dozvěděli, že v CSS2 existují dva nové pseudoelementy :before a :after. Podívejme se na ně podrobněji. Ukáži vám také mechanismus vkládání uvozovek a číslování, které s těmito pseudoelementy přímo souvisejí.

Pseudoelementy :before a :after označují místo před začátkem a za koncem elementu. Jejich využití tkví ve vkládání textu (ať už pevně zadaného nebo generovaného) na začátek, respektive konec elementu. Například styl h1.warning:before {content: "Důležité: ";} vloží text Důležité: před všechny hlavní nadpisy, které mají atribut class="warning". Takto vložené řetězce přejímají formátování mateřského elementu. Nastavíme-li všem odstavcům z minulého příkladu třeba červené písmo p.warning {color: red;}, červeně bude napsán i obsah vlastnosti content. Jak asi tušítě, stěžejním prvkem celého tohoto mechanismu je vlastnost content.

Content aneb obsah

Vlastnost content může nabývat různých typů hodnot. Základní možností je řetězec (string). Řetězec se zapisuje do uvozovek a bude přímo beze změn vložen před či za element (viz příklad výše). Pozor, pokud do daného řetězce vložíte XHTML tagy, nebudou interpretovány, ale normálně se zobrazí!

Podobně můžeme vkládat i obsah celého souboru. Například p:before {content: url("pics/tecka.gif")} vloží před každý odstavec obrázek pic.gif. Pokud prohlížeč daný typ souboru nerozpozná, nesmí dle CSS2 zobrazit vůbec nic. Zajímavé je, že se mi žádný prohlížeč nepodařilo donutit vložit obsah čistě textového souboru.

Další možnou hodnotou je CSS2 funkce attr(x). Ta vrátí hodnotu atributu x daného elementu. Pomocí p:before {content: attr(title)} vložíme před každý odstavec hodnotu jeho atributu title.

Neméně lákavou možností je určení, zda obsah daného elementu bude v uvozovkách. Toho docílíme použitím klíčových slov open-quote (otevírající uvozovky) a close-quote (uzavírající uvozovky). Další dvě klíčová slova, no-open-quote a no-close-quote prohlížeči přikazují, aby nevložil žádné uvozovky, ale přesto zvýšil stupeň zahnízdění uvozovek (tedy jakoby tam uvozovky formálně byly, ale nezobrazovaly se). Pravděpodobně nejste z předešlé věty příliš moudří, ale nebojte, vše bude ještě vysvětleno.

Poslední možností je vložení číslování pomocí funkcí counter() a counters(). Možnost je to natolik komplexní, že je jí věnována samostatná kapitola tohoto článku.

Nakonec se ještě sluší dodat, že vlastnost content může mít více výše uvedených hodnot, které pak spojí do jednoho řetězce. Například h1:before {content: "title=" attr(title) ": "} vloží před každý hlavní nadpis řetězec title=hodnota_parametru_title: .

Podpora v prohlížečích

Uvozovky

Již jsem nastínil, jak lze před a za nějaký element umístit uvozovky. Tím vše zdaleka nekončí. CSS2 používá novou vlastnost quotes definující typ uvozovek, které pak budou vloženy namísto klíčových hodnot open-quote a close-quote vlastnosti content. Hodnota vlastnosti quotes je tvořena páry řetězců, které obsahují vždy otevírací a zavírací uvozovku. Je-li těchto párů více, znamená to, že definujeme různé uvozovky pro vnořené elementy. Například q {quotes: '"' '"' "'" "'"} znamená, že text uzavřený do elementu q má mít na začátku a na konci klasické dvojité uvozovky a je-li vnořen do jiného elementu taktéž s nastavenými uvozovkami (pomocí hodnot open-quote a close-quote), má použít jako uvozovky apostrofy. Pokud by byl tento element takto vnořen více než jednou (což asi není příliš pravděpodobné), budou použity uvozovky uvedené jako poslední (v tomto případě apostrofy).

Pokusme se nyní nadefinovat správné chování řádkového citátu q:

q:before {content: open-quote;}
q:after {content: close-quote;}
q {quotes: ‚“‚ ‚“‚ „‚“ „‚“ „«“ „»“}

Mimochodem, toto je správný způsob, jak by se měly chovat prohlížeče při interpretaci řádkových a blokových citaci (q a blockquote). Že se tak často nechovají, a jak tomuto problému čelit, se můžete dočíst v článku Martina Snížka.

Nyní jste již možná pochopili funkci dříve zmíněných klíčových slov no-open-quote a no-close-quote. Uvozovky sice na jejich místo vloženy nejsou, ale přesto ovlivní hladinu zanoření.

Podpora v prohlížečích

Číslování

Konečně se dobíráme, podle mého názoru, hlavního smyslu pseudoelementů :before a :after. Ve zkratce řečeno, občas chceme před každý element vložit (generovat) jeho pořadové číslo. CSS2 k tomu poskytuje číslování (counter). Pro každé počítadlo si nejprve musíme zvolit identifikátor (název). Ten pak použijeme jako hodnotu dvou nových vlastností counter-reset a counter-increment.

Vynulování a zvýšení počítadla

Vlastnost counter-reset znamená, že daný element zresetuje (vynuluje) zadané počítadlo. Dejme tomu, že chceme číslovat podnadpisy h2 uvnitř hlavních nadpisů h1. Pak je přirozené, že každý hlavní nadpis musí naše počítadlo (dejme mu název třeba poc) vynulovat. Tedy h1 {counter-reset: poc;}. A dále po každém podnadpise h2 vyžadujeme, aby zvýšil hodnotu počítadla o jedna a zobrazil jej před svým vlastním obsahem, což zajistí vlasnost counter-increment:

h2:before
{content: counter(poc) “ „;
counter-increment: poc;}

Všimněme si několika zvláštních konstrukcí v předchozím kódu. CSS2 funkce counter(poc) vrátí hodnotu počítadla poc. Možná vás napadlo, že kód není úplně korektní. Hned první podnadpis za hlavním nadpisem by měl intuitivně mít číslo 0, neboť vlastnost zvýšení počítadla je uvedena až za výpisem hodnoty! Podle CSS2 ovšem prohlížeč musí nejdříve vykonat příkazy counter-increment a counter-reset, až poté pracovat s obsahem počítadla. Proto je předchozí kód správný. Podobně, pokud má jeden element nastavenu jak vlastnost counter-increment, tak i counter-reset, nejdříve bude počítadlo vynulováno a až pak zvýšeno.

Obě vlastnosti mohou obsahovat navíc i číselnou hodnotu, která značí, o kolik se má počítadlo zvýšit, respektive na jakou hodnotu nastavit:

h1 {counter-reset: poc 2;} /* nastaví počítadlo poc na 2 */
h2 {counter-increment: poc 3} /* zvýší počítadlo poc o 3 */

Pozor však na následující zápis:

h1
{counter-reset: poc1;
counter-reset: poc2;}

Na první pohled by se dalo předpokládat, že tento nadpis vynuluje počítadla poc1 a poc2. Ale ve skutečnosti tomu tak není! Dle kaskádových pravidel bude brána ta hodnota vlastnosti, která byla uvedena později, a proto bude vynulováno pouze počítadlo poc2. Pokud chcete, aby vám nějaký element vynuloval více počítadel, musíte to zapsat takto: h1 {counter-reset: poc1 poc2;}. Obdobná situace pochopitelně platí i pro vlastnost counter-increment.

Poslední poznámka se týká situace, kdy chceme zvýšit nějaké počítadlo, které není resetováno žádným jiným prvkem. V tomto případě CSS2 definuje, že počítadlo je automaticky resetováno nadřazeným elementem. Pro dokumentaci tohoto pravidla si představme následující situaci. Chceme číslovat hlavní nadpisy h1 počítadlem poc. Nastavíme jim tedy h1 {counter-increment: poc;}. Zároveň bychom měli ale počítadlo vynulovat. Asi jediným nadřazeným elementem je v tomto případě element body. Mohli bychom tedy zadat body {counter-reset: poc;}, ale nemusíme tak učinit, neboť by to prohlížeč měl udělat za nás.

Vkládání a formátování číslování

Jak jsme se tedy dozvěděli, funkce counter(poc) vrací hodnotu zadaného počítadla poc a používá se společně s pseudoelementy :before a :after. Funkce může mít i druhý argument udávající, jak se má dané číslování formátovat. Implicitně je reprezentováno desítkovým číslem, je mu ale možno nastavit následující možnosti (které asi znáte z XHTML seznamů ul, ol):

Uvedená tabulka není úplně kompletní, ale plně pokrývá použitelné možnosti formátování. Chceme-li před nadpisy vložit číslování v podobě velkých římských číslic, uděláme to následovně:

h1:before
{content: counter(poc, upper-roman) “ „;
counter-increment: poc;}

Zahnízděné číslování

Poslední část kapitoly o číslování se týká vnořování počítadel. Představme si následující situaci (která je vám asi důvěrně známá, jde v podstatě o klasický XHTML setříděný seznam):

<style type=“text/css“>
  ol {counter-reset: poc;}
  li:before
  {counter-increment: poc;
  content: counter(poc) “ „;}
</style>
…
<ol>   <!– vytvoří a nastaví poc[0] na 0 –!>
  <li>první položka</li>   <!–zvedne poc[0] na 1 –>
  <li>druhá položka</li>   <!–zvedne poc[0] na 2 –>
  <ol>   <!– vytvoří a nastaví poc[1] na 0 –>
    <li>první položka podseznamu</li>   <!–zvedne poc[1] na 1 –>
    <li>druhá položka podseznamu</li>   <!–zvedne poc[1] na 2 –>
  </ol>   
  <li>třetí položka</li>   <!–zvedne poc[0]     na 3 –>
</ol>

Jak jste možná pochopili, je-li nějaký prvek s číslováním vnořen do sebe sama, pak vlastnost counter-reset vytvoří nové počítadlo (se stejným názvem) a to vynuluje. Podobně counter-increment bude zvyšovat hodnoty nově vytvořeného počítadla, nikoliv toho původního. K zahnízděným číslováním se vztahuje i dnes poslední CSS2 funkce counters(poc,oddelovac). Ta vezme hodnoty všech zahnízděných počítadel poc, oddělí je příslušným oddělovačem a vrátí jako řetězec. Tedy pro předchozí příklad by mohla vypadat takto: li:before {content: counters(poc, ".");}. Před položky hlavního seznamu by vložila 1,2,3; před položky vnořeného seznamu pak 2.1 a 2.2.

Podpora v prohlížečích

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

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