CSS2 – kaskádové styly podruhé

Jan Dudek se pustil do zmapování nejnovějších vlastností CSS2 a pustil se na tenký led jejich podpory různými prohlížeči. Připravil pro vás zajímavý seriál, který bude postupně vycházet na Intervalu. Již v úvodním dílu si vzal na mušku změnu kurzoru a stín pod textem. Nejdříve se ale projdete zdroji, které byste neměli přehlédnout.

V „pravěku“ webdesignu se nikdo příliš vzhledem stránek nezabýval. Důvodem byly pochopitelně nízké přenosové rychlosti a akademické prostředí, kde se web zrodil. Jak ale rychlosti rostly a internet se stával komerčnějším, na vzhled stránky se kladly větší nároky, někdy i na úkor samotného obsahu. V té době existoval jediný jazyk, HTML, který se staral jak o obsah, tak i o vzhled stránky. Po čase ale začalo být zřejmé, že obsah by měl být od vzhledu oddělen, což v konečné fázi zapříčinilo vznik jazyka popisujícího vzhled HTML elementů. Tímto jazykem je CSS (Cascading Style Sheets).

Norma CSS byla vydána roku 1996. Za tu dobu již všechny důležité prohlížeče zvládly drtivou většinu možností prvních kaskádových stylů. Autory stránek je CSS podporováno a dnes se již jedná o nepostradatelnou součást webu.

Po necelých dvou letech vydalo W3C novou verzi této normy, známou jako CSS2. Přestože již od této doby uplynulo takřka pět let, situace není nijak růžová. Prohlížeče často nezvládají „nově“ přidané vlastnosti, často ani ty, které by byly velmi dobře použitelné. A navíc bývají informace o CSS2 zkreslené a neúplné. Tu a tam se na světlo světa dostane nějaká zmínka o konkrétní vlastnosti, ale obecně platí, že mnozí webmasteři o této normě příliš nevědí.

Proto vznikl tento seriál. Chtěl bych v něm zmapovat nové a často neznámé vlastnosti a možnosti CSS2. V následujících týdnech budou na Intervalu vycházet jednotlivé články, ve kterých probereme nové selektory, pseudo-třídy a pseudo-elementy, styly určené pro tisk, generovaný obsah, pozicování a mnohé další. Věřím, že některá témata vám budou známá, přesto není od věci si je zařadit do kontextu se všemi ostatními vlastnostmi.

Jak jsem se již zmínil, zdaleka ne všechny prohlížeče CSS2 plně podporují. Proto se v každém článku zaměřím na ty, které mám v době jeho vzniku k dispozici jako nejnovější, a přiložím tabulku, jak dané vlastnosti zvládají.

Při čtení tohoto seriálu předpokládám znalosti původní normy CSS1. Doporučuji vám také přečíst si seriál Miloslava Ponkráce Kaskádové styly – kompletní průvodce začátečníka, respektive prostudovat normu CSS2 dle W3C. K původnímu CSS se budu vracet pouze výjimečně, spíše kvůli rekapitulaci.

V textu budu často používat některá slova, jejichž význam by měl být snad dostatečně známý. Přesto zde pro jistotu uvedu malý slovník s výkladem základním pojmů:

• Element – základní jednotka značkovacího jazyka XML (tedy i XHTML).
• Atribut – parametr elementu se svou hodnotou. Element může nést libovolné množství atributů.
• CSS – aneb Cascading Style Sheets. První verze jazyka pro stylování vzhledu stránek. Dnes podporována takřka všemi prohlížeči.
• CSS2 – Cascading Style Sheets, level 2. Nová verze původního CSS.
• Vlastnost – základní prvek CSS, jehož hodnotou popisujeme vzhled daného elementu (např. takto pomocí vlastnosti color nastavím barvu odstavce na zelenou: p {color: green;}).
• CSS funkce – funkce podobná těm v programovacích jazycích. Na základě nějakého parametru vrací výslednou hodnotu, obvykle řetězec (typickou CSS funkcí je rgb(), která vrací hodnotu barvy na základě tří složek).
• Stylesheet – samostatný soubor obsahující definice CSS (obvykle *.css).

Dva příklady pro začátek

V dnešním článku jsem si pro ukázku zvolil dvě vlastnosti. Do žádné rozsáhlejší kapitoly bych je nezařadil, a proto je zde proberu zvlášť. Jde o změnu kurzoru a stín pod textem.

Změna kurzoru

Oblíbeným efektem je změna kurzoru při přejetí obsahu daného elementu. CSS2 pro tento případ definuje novou vlastnost cursor, která může nabývat následujících hodnot:

Jak bude nastavený kurzor vypadat ve skutečnosti, záleží na operačním systému, který ho prohlížeči poskytuje. Vedle těchto systémových kurzorů lze definovat i kurzory vlastní, prostřednictvím CSS funkce url(): p.help {cursor: url("mujhelp.cur");}.

A konečně také můžeme vlastnosti cursor definovat seznam kurzorů zakončený generickým (systémovým) kurzorem. Například zápis p.help {cursor: url("mujhelp.cur"), help;} znamená, že prohlížeč má použít kurzor definovaný v souboru mujhelp.cur a pokud jej nebude schopen použít (neznámý formát kurzoru, chybějící soubor), má použít systémový kurzor help.

Jak se ale říká, všeho s mírou. Vždy dvakrát rozmýšlejte, zdali změna kurzoru k něčemu povede. Není nic horšího než naprosto nepřehledná stránka s desítkami různých kurzorů, ze které uživatel během chvíle odejde. Nicméně doufám, že jste tuto noticku přešli s úsměvem a pouze vám připomněla to, čím se ve webdesignu už dávno řídíte.

Stín textu

Stín pod textem je další z nových vlastností, které nám CSS2 nabízí. Skrývá se pod vlastností text-shadow a obsahuje seznam čárkami oddělených definic stínů (tedy jeden element může vrhat více stínů). Stín definujeme pomocí tří číselných hodnot a barvy. První dvě číselné hodnoty určují posunutí stínu (shadow offset) vzhledem k textu: dvojice 2px 3px znamená, že stín bude posunut o 2px vpravo a 3px dolů. Negativní hodnoty jsou samozřejmě také přípustné a znamenají posunutí vlevo nebo nahoru. Další hodnoty jsou nepovinné. Třetí číselná hodnota značí rozostření stínu (blur radius). No a konečně poslední nepovinný parametr tvoří barva stínu. Není-li uvedena, bude mít stín stejnou barvu jako text. Následujícím zápisem nadefinujeme všem hlavním nadpisům stín posunutý o 2px vpravo a dolů, rozostřený na 4px s modrou barvou: h1 {text-shadow: 2px 2px 4px red;}.

Podpora v prohlížečích

S podobnou tabulkou se budete setkávat v průběhu celého seriálu. Písmeno x znamená, že prohlížeč danou vlastnost podporuje, pomlčka značí opak. Vlastnost text-shadow bohužel zatím není podporována žádným z prohlížečů, což je určitě škoda. Uvidíme, který prohlížeč s ní vyrukuje jako první.

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

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