CSS3 – zpět do budoucnosti

26. října 2005

•

Série článků o budoucnosti CSS3 se pomalu dostává ke svému závěru. V tomto článku se pokusím ohlédnout a shrnout, co nám vlastně nové kaskádové styly přinesou a kde jsou jejich případná úskalí.

Předchozím článkem jsme završili sérii teoreticky popisujících nové vlastnosti a možnosti třetí verze kaskádových stylů. Je tedy načase za nimi udělat tečku v podobě tohoto článku. V něm bych se rád podíval, které žádané možnosti si našly svou cestu do doporučení a které naopak v něm nenajdeme, ačkoli se předpokládalo, že se v něm objeví, respektive se v to doufalo.

Jak jsem již několikrát dříve zmiňoval, vycházel jsem z neúplných dokumentů, jejichž status se pohyboval mezi pracovním návrhem a kandidátem na doporučení. Je tedy zřejmé, že některé části článků nutně nemusí odpovídat realitě finálního doporučení. Přesto si lze již nyní vytvořit docela konkrétní obrázek o tom, jak a kam se kaskádové styly vůbec vyvíjí.

Kdy vlastně bude CSS3 hotové?

Otázka z nadpisu by se ještě dala rozšířit: A bude nám v té době ještě k něčemu? Na stránce CSS: Under construction lze najít kompletní tabulku včetně předpokládaných roků, ve kterých by měly být jednotlivé moduly dokončeny. Již nyní se některé pyšní číslem 2008. A při známé rychlosti W3C je docela možné, že vše bude trvat ještě déle! Nabízí se proto otázka, jestli bude v té době o CSS vůbec někdo stát.

Na tuto otázku je samozřejmě těžká odpověď. Je zřejmé, že vítězné RIA (Rich Internet Application) řešení zamíchá kartami a není zřejmé, jestli bude potřebovat natolik robustní prezentační jazyk, jakým CSS3 bezesporu je, nebo si navrhne vlastní, specifičtější jazyk pro formátování dat. Proto je dle mého názoru důležitější sledovat současný přínos CSS3. Prohlížeče se již nyní snaží implementovat vlastnosti a možnosti, o kterých se předpokládá, že by se jejich specifikace v třetí verzi stylů neměla změnit.

Praktický přínos CSS3

Pokud se podíváme na CSS3 ryze prakticky, najdeme v něm několik skutečně pozitivních vlastností, po kterých webdesignérská obec volá již delší dobu. Jde obvykle o často žádané grafické efekty, které se nyní musí krkolomně emulovat pomocí kombinací jiných vlastností. Proto je určitě správné, že konsorcium tuto situaci reflektovalo a zařadilo do třetí verze kaskádových stylů jejich podporu. Zároveň se v doporučení objevily i další novinky, o nichž lze prohlásit, že určitě nezapadnou.

Vybírám, vybíráš, vybíráme…

V každé následující verzi stylů se zatím objevily nové selektory. V CSS3 rozhodně stojí za zmínku selektory řídící se stromem dokumentu, které umožní na úrovni CSS odlišit například sudé a liché řádky tabulky nebo seznamu. Nebudeme tak muset pro každý takový řádek dynamicky generovat třídu určující jeho paritu, což je způsob, kterým se tento problém v současnosti obvykle řeší.

Průhledné barvy, složená pozadí a kulaté okraje

Nejvíce použitelných novinek se podle mě nachází v modulech zabývajících se barvami a okraji elementů. Definice zakulacených rohů okrajů snad konečně nahradí dosavadní řešení v podobě obrázkového pozadí. Průhlednost zatím byla doménou pouze GIF a PNG obrázků, nyní máme konečně možnost přiřazovat barvám čtvrtou složku definující průsvitnost a efekt opacity, zprůhledňující celý obsah elementu. A na webech používajících složitější grafiku určitě nebude k zahození možnost přiřadit více obrázků na pozadí.

Lepší cílení na média

Osobně dost očekávám od možností definovaných v modulu Media Queries. V poslední době jsme svědky trendu, kdy uživatelé zobrazují obsah webu v podstatě na čemkoli, přičemž tato zařízení mají čím dál tím lepší parametry. Proto jsou v současnosti definované typy médií (screen, print, handheld a další) nevyhovující, protože v jednom typu se tak často vedle sebe objeví zařízení s naprosto odlišným rozlišením a počtem barev. Právě dotazy na médium by mohly tyto problémy vyřešit. Styly již nebudeme psát pro jednotlivé (velmi obecné) typy zařízení, ale pro zařízení s podobnými parametry. Například pro web připravíme tři styly, jeden pro zařízení s rozlišením alespoň 640*480 (tedy počítače a některá pokročilá přenosná zařízení), druhý styl pro rozlišení 320*240 (výkonné mobily, pocket PC a podobné, schopné zobrazit relativně složité weby) a třetí styl pro zbývající zařízení, který ořeže vzhled daného dokumentu na nezbytné minimum.

Další užitečné novinky

Modul Generated and Replaced Content nám pomocí pseudoelementu ::line-marker umožní číslovat jednotlivé řádky elementu. Výborná věc hlavně pro různé výpisy kódů. A prezentační úrovně mi přijdou jako velmi jednoduchá, ale přitom výborná myšlenka, jak využít stávající systém pseudotříd k odlišení různých stavů dokumentu.

Novinek, které mají šanci se uchytit v praxi, bude samozřejmě více. Předchozí text berte jako krátký seznam těch vlastností, které mi přišly jako skutečně důležité nebo nějakým způsobem zajímavé.

Co naopak chybí?

V kontrastu s předchozím textem některé možnosti v třetí verzi kaskádových stylů chybí. Jde o vlastnosti, které byly z CSS3 postupně vypouštěny, případně funkce, které vůbec nebyly implementovány, ačkoli to bylo očekáváno.

Grafické filtry

Do této kategorie patří například grafické filtry, o kterých se předpokládalo, že budou v CSS3 standardizovány. Nestalo se tomu tak, otázkou je, jestli je to špatně nebo dobře. Nadále tak budeme mít k dispozici pouze statické a dynamické (přechodové) filtry definované Microsoftem.

Dynamické selektory

Mě osobně mnohem více chybí podpora přiřazování chování pomocí selektorů, o kterém se můžete více dočíst ve článku Přiřazení skriptu stylem – behavior a HTC. Ve světě kaskádových stylů se tímto mělo zabývat doporučení Behavioral Extensions to CSS, které se zdá být mrtvým dokumentem a vypadá to, že na tom nic nezmění ani CSS3. Škoda je to dle mého názoru hlavně proto, že selektory jsou velmi silným a přitom jednoduchým nástrojem pro výběr elementů. A přiřazování chování elementům je přesně ten případ, kdy by mechanismus selektorů všem značně ulehčil práci.

Řešení sloupcového layoutu

Spousta lidí také od CSS3 očekává, že usnadní řešení layoutů webu. Pozornost se upírala především k modulu Multi-column layout, ale jak jsem se snažil ukázat v příslušném článku, vlastnosti v něm definované se k vytváření sloupcového rozvržení příliš nehodí. Naskýtá se tedy otázka, jestli je chybou, že se konsorcium W3C nepokusilo posílit tyto možnosti. Myslím si, že nikoli, protože současné řešení naráží hlavně na rozdílnou implementaci v prohlížečích a nikoli na nedostatek prostředků ze strany CSS.

Navíc je zde ještě jedna metoda, o které se příliš nemluví. Tabulkový layout, tak jak jej známe z minulosti, je dnes zavrhován především proto, že se k jeho dosažení používají XHTML elementy tr, td a další, které však mají sémanticky úplně jinou úlohu, a to definovat tabulková data. CSS nám ale umožňuje vytvořit vlastní tabulkovou strukturu pomocí sémanticky neutrálních elementů div, těm nastavit pro potřeby zobrazení příslušné chování vlastností display (element ohraničující tabulku, řádek tabulky, buňku tabulky a podobně) a vytvořit tak korektní verzi tabulkového layoutu. A dovoluji si tvrdit, že pro vytvoření některých typů rozvržení by toto byla mnohem schůdnější cesta, než použití pozicovacích vlastností. Opět zde pouze narážíme na implementaci v prohlížečích, která tento způsob tvorby značně limituje.

Stírání hranic mezi vrstvami webové aplikace

V průběhu této série článků jsem několikrát poukazoval na to, že s novou verzí stylů se začínají smývat hranice mezi jednotlivými vrstvami dokumentu. Zatímco u XHTML se postupně podařilo dosáhnout toho, že je oproštěn od drtivé většiny informací popisujících vzhled nebo chování, vývoj CSS3 jde přesně opačnou cestou.

Značné posílení kaskádových stylů na poli nahrazovaného a generovaného obsahu má mimo jiné za následek, že obsahu bude umožněno velmi jednoduše proniknout do prezentační vrstvy. Proto musí být tyto vlastnosti používány skutečně s rozumem a vždy bude nutno pečlivě zvažovat, jestli jde o informaci, která patří přímo do dokumentu, nebo je určena pouze pro potřeby zobrazení. A že toto rozhodování nebude zrovna jednoduché, napovídá i diskuse pod odkazovaným článkem. To, co jsem já považoval za data vygenerovaná z dokumentu pro potřeby zobrazení na monitoru, jiný čtenář jednoznačně zařadil jako data, která mají být ve zdrojovém souboru…

V modulu Hyperlink Presentation se zase setkáváme s jiným problémem, je zde umožněno z CSS ovlivňovat chování odkazů, a tak vlastně suplovat klientské skriptování. Takže až příště budeme zkoumat, kde daný web definuje chování odkazů, budeme muset zkontrolovat všechny tři vrstvy – atributy target daného XHTML dokumentu, JavaScript a nově i kaskádové styly! A to určitě není právě ideální stav.

Souhrn

Tímto článkem končí teoretická část série, která se snažila popsat CSS3 více do hloubky. Doufám, že vám pomohla utvořit si názor na to, co nás na poli kaskádových stylů čeká a nemine. V příštím článku se podíváme, jak současné prohlížeče zvládají interpretaci nových vlastností CSS3.