CSS3 – kaskádové styly budoucnosti

Kaskádové styly způsobily skutečnou revoluci ve tvorbě dokumentů určených pro web, protože umožnily efektivně oddělit obsah od jeho prezentace. Nyní je doporučení CSS ve své druhé verzi a vývojáři začínají pomalu pokukovat po jeho nástupci, normě CSS3. Tato série článků by jim v tom měla pomoci. V tomto článku se podíváme na pozměněnou strukturu doporučení a na nové selektory v něm uvedené.

Každý dokument konsorcia W3C prochází svým vývojem a nejinak je tomu u doporučení CSS. V současnosti je aktuální verze CSS2 (nebo spíše dosud neschválená lite verze CSS2.1), jejíž stupeň implementace se v moderních prohlížečích stále zlepšuje a jedinou (ale bohužel podstatnou) brzdou jejího plného použití na stránkách je absence moderního prohlížeče z dílny vývojářů Microsoftu. Konsorcium však hledí do budoucnosti a už několik let připravuje nástupce CSS2. Ten se bude lišit jak přidanými vlastnostmi a možnostmi, tak i strukturou samotného doporučení.

Modularizace

Nejviditelnější novinkou třetí edice kaskádových stylů je její rozdělení do více dokumentů, které mají (respektive budou mít) status samostatného doporučení W3C. Výhody tohoto rozdělení jsou zřejmé, aplikace pracující s kaskádovými styly tak mohou mnohem jednodušeji definovat, co přesně podporují. Například čtečky XHTML stránek tak mohou deklarovat, že podporují pouze doporučení týkající se mluvených stylů. Jednotlivé dokumenty jsou navíc vyvíjeny relativně samostatně a momentálně se nacházejí v různých stádiích, od pracovního návrhu (Working Draft) až po kandidáty na doporučení (Candidate Recommendation).

Následující tabulka poskytuje souhrn všech modulů CSS3 včetně jejich krátkého popisu a stádia vývoje:

Z tabulky je zřejmé, že třetí verze kaskádových stylů se zaměřuje na mnohem širší okruh možností než předchozí doporučení. V určitých případech je to určitě ku prospěchu věci, na druhou stranu užitečnost některých modulů může být diskutabilní. Musíme si však uvědomit, že tento seznam není zdaleka konečný a je pravděpodobné, že některé moduly z něj úplně zmizí a jiné budou sloučeny do jednoho (Media, Media2, Reader).

V následujících textech budu vycházet z jednotlivých modulů tak, jak byly publikovány v době jejich vzniku. Jak je patrné, většina modulů je nehotových a lze předpokládat určité změny a korekce jejich obsahu. Přesto lze z těchto dokumentů vyčíst směřování kaskádových stylů a získat přehled o novinkách, které s sebou CSS3 přinese. Díky tomu se můžeme nejen připravit na pozdější bezproblémový přechod od CSS2 k CSS3, ale také lépe pochopit současnou verzi doporučení CSS2.

Selektory

Modul popisující CSS3 selektory je v podstatě hotovým dokumentem, ve stádiu kandidáta na doporučení se již nachází přes čtyři roky a lze tedy předpokládat, že se bude lišit od finální verze pouze v maličkostech. Přináší nové selektory, pseudotřídy, pseudoelementy (včetně jejich lehce pozměněné syntaxe) a možnost specifikace jmenného prostoru (namespace).

Vybírání elementů dle jejich obsahu

Novinkou třetí verze kaskádových stylů je možnost vybírání elementů podle jejich obsahu. K tomu slouží nově uvedená pseudotřída :contains("řetězec"). Umožňuje vybrat všechny elementy obsahující podřetězec řetězec. Například selektoru p:contains("interval") odpovídají všechny odstavce obsahující slovo interval.

Také se rozrostly možnosti výběru elementů podle obsahu jejich atributů, a to o selektory E[foo^="bar"], E[foo$="bar"] a E[foo*="bar"]. Odpovídají jim ty elementy E, jejichž atribut foo začíná nebo končí řetězcem bar, případně jej obsahuje.

Selektory řídící se stromem dokumentu

Největší důraz v oblasti selektorů byl dán na výběr elementů podle stromu dokumentu. V druhé verzi stylů byla k dispozici pouze pseudotřída :first-child, označující prvního potomka elementu. CSS3 tuto poměrně chudou nabídku rozšiřuje o následující pseudotřídy:

Co činí tyto pseudotřídy skutečně mocnými, je možnost dosadit za výraz n nejen obyčejné číslo, ale i polynom ve tvaru (an + b). Následující ukázka představuje typickou možnost užití těchto selektorů:

tr:nth-child(2n) td
{
  /* nastavení buněk sudých řádků */
}
tr:nth-child(2n+1) td
{
  /* nastavení buněk lichých řádků */
}
tr:first-child td
{
  /* nastavení buněk prvního řádku tabulky */
}
tr:last-child td
{
  /* nastavení buněk posledního řádku tabulky */ }

Ti, co stačili rychle oprášit středoškolské vědomosti matematiky, určitě rozpoznali, že polynomu 2n odpovídají (n je přirozené číslo) všechna sudá čísla a 2n+1 zastupuje všechna lichá.

Dále lze také rozlišovat, jestli je element prázdný (nemá potomky ani textový uzel) pomocí pseudotřídy :empty, respektive jestli jde o kořenový (element html v XHTML) pomocí :root.

Pseudotřídy pro práci s formuláři

Novinkou jsou také pseudotřídy umožňující rozpoznat stavy formulářových komponent. Nově budeme schopni určit styly povolených (:enabled) a zakázaných (:disabled) prvků a u třístavových prvků (checkbox, radiobutton) jestli jsou zaškrtnuté (:checked), respektive ve stavu, kdy nejsou ani zaškrtnuté, ani prázdné (:indeterminate).

Další pseudotřídy

V některých případech se nám může hodit poznat na úrovni kaskádových stylů element, který je odkazován v adrese dokumentu (odkazy typu http://example.net#first). K tomu slouží pseudotřída :target(). Následující pravidlo způsobí, že element požadovaný v URI bude vypsán červeně: *:target {color: red;}.

Poslední nová pseudotřída umožňuje obrátit logiku selektorů a vybírat elementy, které neodpovídají danému selektoru. Její syntaxe je :not(selektor). Jednoduchým příkladem budiž selektor :not(p), kterému odpovídají všechny elementy kromě odstavce. Tuto negaci lze použít i společně s dalšími pseudotřídami, například :not(p:empty) odpovídají všechny odstavce, které nejsou prázdné.

Výběr elementu nepřímo následujícího za jiným elementem

CSS3 definuje také nový kombinátor ~, sloužící k definování situace, kdy dva elementy mají stejného rodiče a jeden následuje druhý. Tento kombinátor je podobný staršímu + s tím rozdílem, že elementy nemusí následovat ihned po sobě:

h1 + h2
{
  /* elementy h1 a h2 mají stejného rodiče a h2 přímo následuje h1 */
}
h1 ~ h2
{
  /* elementy h1 a h2 mají stejného rodiče a h2 je uveden za h1 */ }

Pseudoelementy a jejich nová syntaxe

Podle mého názoru zbytečnou změnu provedlo konsorcium W3C na poli syntaxe pseudoelementů. Aby byly lépe odlišeny od pseudotříd, předchází jejich identifikátor nově dvě dvojtečky (céčkovská čtyřtečka) namísto klasické jedné. Nově tedy píšeme p::first-line. Prohlížeče mají ale u pseudoelementů z původních dvou verzí kaskádových stylů akceptovat i syntaxi s jednou dvojtečkou…

Jediným novým pseudoelementem třetí verze kaskádových stylů je ::selection, jemuž odpovídá část textu elementu vybraného uživatelem. Vlastnosti aplikovatelné na takový výběr jsou color, cursor, background, outline. Když tedy například nastavíte p::selection {color: red; background-color: white;}, bude text vybraný myší vypsán červeně na bílém pozadí.

Jmenné prostory vstupují do hry

Poslední výraznou novinkou je možnost výběru elementů podle jejich příslušnosti k danému jmennému prostoru. Pokud chceme vybrat všechny elementy ze jmenného prostoru html, provedeme to pomocí konstrukce html|*. Selektor se tedy sestaví tak, že za název jmenného prostoru se dá symbol | a samotný typový nebo univerzální selektor.

Selektory budoucnosti

Jak je vidět, konsorcium W3C dalo velký důraz na možnosti selektorů. Některé z nich mohou být skutečně užitečné, hlavně pseudotřídy založené na stromu dokumentu velmi jednoduše a efektivně řeší problém s výběrem sudých a lichých elementů (řádků tabulky) a podobně. Zařazení jiných možností (například pseudoelementu :selection) je alespoň pro mě diskutabilní, uvidíme, jak za nás tuto otázku vyřeší autoři prohlížečů.

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

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