Content
použití pseudotříd :before a :after
CSS vlastnost content přidává před nebo za stylovaný prvek HTML obsah. Selektor pro vlastnost content se musí zapsat pomocí pseudotříd :after a :before. Vlastnost content nefunguje v Exploreru 6 a 7 (takže bývala skoro nepoužitelná). Nyní, když IE 7 ustupuje (aktualizace 2012), je možné začít content používat.
| hodnoty | přidává se obsah |
|---|---|
| "text" | přidává se text, nemůže to být HTML |
| url('obrázek.gif') | vloží do stránky obrázek (už rovnou) |
| attr(atribut) | vypíše hodnotu atributu stylovaného prvku (např. href, title apod.) |
| open-quote, close-quote | otevírací nebo zavírací uvozovky |
| counter() | přidá číslování podle parametrů (relativně složité, viz příklad) a vlastnost counter-increment |
| nic | žádný obsah, to je výchozí hodnota uvedená jenom pro pořádek |
Vlastnost content je docela netradiční, protože narozdíl od všech jiných CSS vlastností umí do stránky přidávat obsah. Další zvláštností je, že musí být navázána na speciální selektor s pseudotřídou after nebo before.
(Zpočátku se mi zdálo, že dělat tohle selektorem je v CSS trochu úlet. Případné vlastnosti content-after a content-before, které ale neexistují, by mi přišly pochopitelnější. Výhoda selektoru :after a :before ovšem je, že se přidaný obsah dá dále stylovat.)
Bude lepší začít příkladem:
<style>
div:after {content: " konec divu";}
</style>
...
<div>prvek</div>
Tento zápis přidává text "konec divu" na konec každého divu (after = za). Takže výsledkem bude zobrazený text:
prvek konec divu
Jiný příklad, který něco přidává před prvek (before):
.kliknete:before {content: "Klikněte si! ";}
Před každý prvek, který má nastaveno class="kliknete", přidá text Klikněte si!.
| anglicky | česky |
|---|---|
| content | obsah |
| before | před |
| after | za, po |
Jestli si to nepamatujete, tak vězte, že before a after jdou v abecedě opačně.
Podpora
| Prohlížeč | Podpora ve verzích | Poznámka |
|---|---|---|
| Firefox | všechny verze | |
| Internet Explorer | správně od verze 9 | dříve nepodporoval attr() |
| Chrome | všechny verze |
Ne vždy mi vlastnost content funguje s formulářovými prvky, zejména input.
Dobře míněné poznámky k vlastnosti content
- Pokud přidáváte text, je dobré obalit ho mezerami, aby se nelepil na samotný text prvku.
- Obsah přidávaný vlastností content by neměl vyjadřovat nic důležitého. Jednak se nemusí zobrazit uživatelům se starším prohlížečem (těch je naštěstí už dost málo), ale hlavně ten případný text neuvidí roboti vyhledávačů, a proto ho nedokážou zaindexovat ani najít.
- U některých pokusů se Internet Explorer tvářil, že potřebuje standardní doctype. Toto chování se mi ale nepodařilo zopakovat. Kdyby něco nefungovalo, podívejte se tedy, zda máte ve stránce doctype.
- Prohlížeče se značně liší v tom, jestli dovolí přidávaný text označit a zkopírovat. Zatímco Opera nechá označit všechno, Chrome a Firefox nic, kdežto Explorer jenom to, co je přidáno přes :after.
- Vlastnost content nelze vkládat in-line zápisem přímo do tagu, protože sváže na pseudotřídy :after a before. Jinak řečeno nelze zapsat nic jako <span style="content:'obsah'">bla bla</span>. (Tedy samozřejmě lze, ale nic to neudělá.)
Nelze vkládat HTML
Pomocí vlastnosti content se nepodaří do dokumentu vložit žádný html tag, který by se dále interpretoval jako tag. Když do obsahu vlastnosti content vložíte zobáček < nebo >, prostě se zobrazí jako zobáček. Příklad:
div:before {content: "<b>"}
div:after {content: "</b>"}
...
<div>prvek</div>
Způsobí, že se ten div do stránky vypíše včetně tagů se zobáčky, tedy jako <b>prvek</b>, nikoli tučně jako prvek. Smůla. Kdyby to fungovalo, dala by se tím takhle dělat náramná kouzla, ale nejde to. (Asi záměrně, protože by to mohlo vést k nutnosti přeparsování dokumentu.) Nikdy se mi tedy touhle vlastností nepodařilo přidat HTML obsah, vždycky jenom text (nebo to, co je výše zmíněno v tabulce).
Pokud je potřeba přidaný text stylovat (například ztučnit), tak se styl přidává přímo do deklarace za vlastnost content:
p:after {content(" konec odstavce"; font-weight: bold;}
Vkládání entit
Entity se do contentu vkládají pomocí hexadeximálního zápisu za zpětným lomítkem.
p:after {content:"\00b6";}
Tento příklad vloží za všechny odstavece znak konce odstavce.
Následující zápis je špatně:
td:after {content:" "}
Nedělitelná mezera se musí vkládat zápisem
content: "\00a0";
protože hexadecimální číslo 00a0 představuje desítkové číslo 160, což je číslo entity nedělitelné mezery ( ).
Attr()
Hodnota attr(atribut) umožňuje vložit před nebo za prvek hodnotu nějakého jeho atributu. Je to zřejmě k ničemu. Nenapadla mě situace, kdy bych potřeboval do dokumentu vpisovat něco z atributů.
Například budu chtít za odkaz vypsat, na jakou adresu kliká.
a:after {content: attr(href)}
Což způsobí, že se klikací text odkazu rozšíří o tu http://... adresu. Blbé mimochodem je, že se atribut nedá oddělit mezerou, takže se ve výsledku bude vždycky ošklivě lepit na samotný obsah prvku. Prostě nepoužitelná podivnost, vhodná snad jenom pro ladění a zvláštní situace, kdy se nějaká podstatná věc schovala do parametru tagu místo aby byla v jeho obsahu.
Url()
Hodnota URL umí před nebo za prvkem zobrazit obrázek.
span.sobrazkem:before {content: url(("adresa-obrazku.gif");}
Zvětšovat a zmenšovat obrázek lze vlastností zoom. Obrázek není možné zmenšovat a zvětšovat pomocí width a height, protože tyto parametry určují pouze to, kolik místa se pro obrázek zarezervuje a do kteréhožto místa se nepustí normální obsah prvku. Obrázku lze nastavit blokové zobrazení přes display: block (zalomí se za ním řádek), dá se nechat obtékat, lze ho absolutně a relativně pozicovat. Prostě se s ním dá dělat většina věcí, která se dělá s normálním obrázkem.
span.sobrazkem:before {content: url(("adresa-obrazku.gif"); zoom: 0.5; float: left; margin-right: 1px;}
Ale stejně jsem nějak nepochopil, k čemu je to přesně dobré. Když totiž chci mít na stránce obrázek, tak tam vložím jako HTML obrázek. Obrázkové odrážky, když už, se dělají přes list-style-image. Takže tenhle content: url() se dá použít snad jenom jako pokročilejší obrázková odrážka nebo, při dobrém pozicování, na přidání jednoho "popředí", např. nějakou dekoraci do jednoho růžku fotky.
Pokud se obrázek nepodaří načíst (nepodporovaný typ, špatná adresa), prohlížeče se liší v chování. IE a Firefox se tváří jakoby nic. Opera a Chrome vykreslí ikonku chybějícího obrázku.
Příklady
Živé příklady zatím nejsou, něco málo mrtvých příkladů je v textu výše.
Reklama
