CSS3 – formátování dynamických částí dokumentu

4. října 2005

•

Kaskádové styly umožňovaly již ve svých předchozích verzích ovlivňovat uživatelské prvky definované v dokumentu. CSS3 jde v tomto ještě dále a nabízí nám dva moduly popisující spolupráci s odkazy a formulářovými prvky.

Některé elementy značkovacích jazyků jsou na webu často interpretovány a následně zobrazovány jako dynamické uživatelské prvky. Může jít třeba o obyčejný hyperlink, nebo o pole formuláře sloužící k zadávání hodnoty. Současné verze kaskádových stylů nabízejí pouze velmi omezené možnosti, jak ovlivnit jejich vzhled. Jedním z problémů je, že neumožňují v předpisu stylu zachytit různé stavy, ve kterých se tyto prvky mohou nacházet. Nejen toto omezení se snaží vyřešit dva moduly, které budou popsány v tomto článku.

Formátujeme formulářové prvky

Modul Basic User Interface se nachází v pokročilém stavu kandidáta na doporučení. Značně rozšiřuje a přináší nové možnosti stylování prvků uživatelského rozhraní (hlavně pak formulářů). Pro mě představuje asi nejrozporuplnější dokument z rodiny modulů CSS3. Zčásti obsahuje určitě užitečné novinky, zároveň však uvádí i koncepty, se kterými nemůžu příliš souhlasit.

Nové pseudoselektory

V článku CSS3 – kaskádové styly budoucnosti jsem uvedl několik základních pseudotříd pro práci s formuláři. Konkrétně šlo o :enabled, :disabled, :checked a :indeterminate. Tento modul navíc přináší další postihnutelné stavy.

Narozdíl od poměrně primitivních formulářů, které jsou součásti XHTML, existují (respektive mohou existovat) další jazyky, umožňující mnohem přesnější definici těchto uživatelských prvků. Jde například o povolený formát či rozsah hodnoty, nebo o povinnost vyplnit daný prvek. Momentálně taková nastavení umožňuje jazyk XForms, který by měl v XHTML2 nahradit stávající formuláře. Pro práci s těmito pokročilými prvky jsou definovány následující nové pseudotřídy:

pseudotřída	popisuje stav
:default	prvek zastupující větší skupinu voleb (počáteční hodnota roletového menu, potvrzovací tlačítko potvrzující celý formulář…)
:valid	vyplněná data jsou ve správném formátu
:invalid	vyplněná data neodpovídají formátu
:in-range	hodnota je v povoleném rozsahu
:out-of-range	hodnota je mimo povolený rozsah
:required	hodnota musí být vyplněna
:optional	hodnota není povinná
:read-only	prvek je pouze pro čtení
:read-write	do prvku je povolen zápis

Na tomto příkladu se pokusím demonstrovat užitečnost některých z uvedených konstrukcí:

:invalid, :out-of-range
{
  background-color: red;
  color: white;
}
:required::after
{
  content: „*“;
  color: red;
}

Pod všemi špatně vyplněnými poli se vykreslí červené pozadí. Pokud je některá hodnota vyžadována, bude to signalizoval červená hvězdička za příslušným formulářovým prvkem. A to vše bez klientského skriptování, pouze pomocí kaskádových stylů a dat získaných z dokumentu.

Na základě struktury jazyka XForms byly dále definovány čtyři pseudoelementy reprezentující dynamické části uživatelského rozhraní, které zde nejsou představovány svým elementem jako je tomu u XHTML formulářů. Konkrétně jde o pseudoelementy ::value, ::choices, ::repeat-item a ::repeat-index.

Přejímání vzhledu z platformy

Doporučení CSS2 zavedlo možnost přejímat některé hodnoty týkající se vzhledu z platformy, ze které je daný dokument prohlížen. Konkrétně šlo o klíčová slova popisující důležité systémové barvy (například pozadí okna, text v menu a jeho pozadí, barva vybraného textu a podobně). Dále bylo umožněno upravovat vzhled kurzoru a zvýraznění aktivních prvků (outline), používané například k zvýraznění zaměření (focus).

Zatímco formátování kurzoru i zvýraznění aktivních prvků zůstalo součástí kaskádových stylů, systémové barvy jsou v CSS3 považovány za překonané (deprecated) a místo nich přichází nový koncept reprezentovaný vlastností appearance. Ta umožňuje elementu vypadat jako prvek grafického rozhraní. Přejímat vzhled lze od základních prvků uživatelského rozhraní, jako například ikona, okno, různé druhy tlačítek, hyperlinkový odkaz, záložka nebo menu a jeho položky. Jednotlivé prvky jsou definovány pomocí přiřazených klíčových slov.

Pomocí vlastnosti appearance tak lze z rozhraní převzít více než pouhou barvu, jak tomu bylo dříve. Mějme například svoji vlastní syntaxi založenou na XML a chtějme, aby se element bttn vykresloval jako tlačítko platformy, na které je zobrazován: bttn {appearance: button;}.

Osobně jsem z této nové vlastnosti trochu rozpačitý. Argumentem pro zavedení takové vlastnosti je fakt, že danému elementu se touto vlastností přiřazuje pouze vzhled a nikoli chování (tedy tlačítko z předchozího příkladu bude vypadat jako tlačítko uživatelského rozhraní, ale chování mu bude muset být přiřazeno pomocí klientského skriptování). V tomto směru je vše v pořádku. Zároveň však mám pocit, že se zde CSS začíná míchat do interpretování dokumentu. Pokud chceme mít k dispozici prvky uživatelského rozhraní, měli bychom k tomu použít odpovídající jazyk (XHTML formuláře nebo XForms), jehož elementy jsou jako tyto prvky interpretovány, a nikoli k tomu pomocí kaskádových stylů složitě uzpůsobovat jiné prvky, které k tomu nejsou sémanticky uzpůsobeny. Z tohoto hlediska nepovažuji zařazení vlastnosti appearance za nejvhodnější.

Používání systémových fontů

Jak jsem uvedl výše, W3C zavrhlo systémové barvy a nabídlo možnost změny celého vzhledu podle některého uživatelského prvku. Zároveň však nadále podporuje a rozšiřuje přejímání vzhledu písma z těchto prvků. Souhrnná vlastnost font nyní může nově přijímat všechna klíčová slova použitelná jako hodnota appearance. Pokud tedy chcete, aby měly elementy s třídou .lookLikeMenu písmo shodné s tím, které používá prohlížeč ve svém menu, jednoduše použijte .lookLikeMenu {font: menu;}.

Zdá se vám to nelogické stejně jako mně? Na jednu stranu již nelze přejímat barvu z uživatelských prvků (a lze přejímat jejich kompletní vzhled), ale zároveň je posílena možnost získávat styl jejich písma. Přestože je tento dokument v poměrně pokročilé fázi vývoje, doufám, že se jej W3C pokusí trochu sjednotit tak, aby si jeho jednotlivé části neodporovaly.

Ovládání z klávesnice

Novinku, kterou v CSS vítám, je možnost definovat pořadí prvků pro navigaci z klávesnice. Jde například o klávesu TAB na platformě Windows, pomocí které se lze přepínat mezi jednotlivými uživatelskými prvky na stránce. Pořadí těchto prvků šlo původně ovlivnit XHTML atributem tabindex, který nyní přechází do kaskádových stylů jako vlastnost nav-index.

Nově lze také definovat navigaci pro směrové šipky vlastnostmi nav-up, nav-right, nav-down a nav-left. Jejich hodnota je tvořena odkazem na následující prvek, a to ve tvaru #id_prvku, tedy jde v podstatě o id selektor.

Mějme tři tlačítka s identifikátory b1, b2, b3 a po tlačítku b2 požadujme, aby při zmáčknutí klávesy vlevo či nahoru předalo zaměření tlačítku b1, jinak tlačítku b3:

#b2
{
  nav-left: #b1;
  nav-up: #b1;
  nav-right: #b3;
  nav-down: #b3;
}

Zaměřeno na odkazy

S příchodem přísnějších norem XHTML se poprvé objevila otázka, která vrstva klientské části aplikace by měla být zodpovědná za chování při výběru odkazu, přesněji, kde má být definováno, jestli se má odkaz otevřít do nového okna nebo do stávajícího. Do té doby se jednoduše používala hodnota _blank atributu target. V XHTML 1.0 již však tento atribut figuruje pouze ve verzi Frameset. Proto začaly takřka filozofické diskuze o tom, kde by se toto chování mělo definovat a zdali vůbec. Nakonec se došlo k tomu, že by se mělo otvírání do nového okna realizovat plně pomocí klientských skriptů.

Nyní se cesta řešení tohoto problému uzavírá a po datové a aplikační vrstvě webové stránky jej máme i na prezentační úrovni! Byl k tomu vyčleněn samostatný modul Hyperlink Presentation, který je momentálně ve fázi pracovního návrhu, tedy se ještě může do značné míry změnit.

Stěžejní vlastnost target-name definuje cíl odkazu. Hodnoty current a root zapříčiní, že se odkaz vždy otevře do stejného okna. Prvně uvedená hodnota navíc bere v potaz i rámce. Hodnota parent otevře odkaz do rodičovského okna. A konečně hodnoty new a modal definují otevření do nové destinace.

Vytvoření nového okna lze ještě dodefinovat vlastnostmi target-new a target-position. Lze jimi upřesnit, jestli se má dokument otevřít v novém okně nebo nové záložce stávajícího okna, a polohu tohoto nově vytvořeného cíle.

Otázkou samozřejmě zůstává (podobně jako v prvně popisovaném modulu), zda je zařazení kontroly otevírání odkazů do prezentační úrovně zrovna vhodné. Vyjmutí atributu target z XHTML je jednoznačně správným krokem, ale zahrnutí jeho ekvivalentu do CSS je přinejmenším diskutabilní. Snad jediným přínosem v tomto případě bude možnost ovlivnit chování všech odkazů pomocí vlastního stylu.

Souhrn

V tomto článku jsme si představili dva CSS3 moduly, které mimo jiné spojuje přesah do dalších vrstev webových stránek. U obou modulů jsem si nebyl u některých možností zcela jistý jejich zařazením právě do kaskádových stylů, o to raději si přečtu vaše názory na toto téma v diskusi.