Další skrytá funkce v CSS

obrázek k článku Další skrytá funkce v CSS Nevím jak správně pojmenovat tento článek. Zvolil jsem proto název, který asi úplně nevystihuje problematiku, kterou se tedy pokusím vysvětlit níže. Spousty stránek kde jsou downloady mají ikonku jako obrázek podle koncovky (typu) stahovaného souboru. Obrázek se často řeší pomocí php, kde se táže, zda koncovka je taková nebo taková. Toto jde řešit naprosto jednoduše pomocí CSS bez potřeby složitého php kódu. Na to jak to řešit si ukážeme v kódu níže!

Komerční Reklama

Sám jsem o této funkci nikdy neslyšel, ale když jsem ji uviděl, hned sem začal přemýšlet o jejím použití v praxi. Na webu, kde jsem o funkci slyšel bylo demonstrační videjko, na které se můžete zde kouknout:

Kdo nerozumí moc anglicky, popisuje zde html a css kód. Pokusím se ho zde tedy demonstrovat ještě jednou česky:

<style> a[href $='.pdf'] { padding-left: 20px; background: transparent url(pdf.jpg) no-repeat center } </style> <a href="foo.pdf">Test</a>

Výše uvedený kód programátor používá. Ve stylu má podmínku (druhý řádek kódu). Podmínka se vztahuje pro odkaz (to říká to a). Poté následují hranaté závorky ve kterých je dotaz zda hodnota parametru href končí na ".pdf". Dolar ($) zde značí zda parametr končí tou hodnotou. Pokud místo dolaru dáme stříšku (^) ptáme se zda hodnota parametru začíná hodnotou námi zadanou. Pokud dáme hvězdičku (*) ptáme se zda námi zadaná hodnota je někde v parametru.

Toto se dá jednoduše měnit a vytvářet podmínky. Pod podmínku stačí jednoduše napsat styl výsledku, jak to bude vypadat!

Doufám, že jste návod pochopili a funkce Vám pomůže při dalším programování.

Komentáře (5) Programování vitek 23.5.2007 18:43

Ohodnoťte článek: Ohodnotit 1 body Ohodnotit 2 body Ohodnotit 3 body Ohodnotit 4 body Ohodnotit 5 body Ohodnotit 6 body Ohodnotit 7 body (hlasováno: 36×, průměr: 4.4)