CSS3 – kaskádové styly budoucnosti

18. května 2005

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:

modul popis stav (k datu publikace článku)
Úvod (Introduction) Úvodní text k celé rodině dokumentů CSS3. Bude obsahovat krátký popis všech modulů a jejich funkcí. Working Draft
Syntaxe (Syntax) Popis generické (zpětně kompatibilní) syntaxe všech tří verzí kaskádových stylů. Working Draft
Selektory (Selectors) Definice a popis selektorů použitelných v CSS3. Candidate Recommendation
Hodnoty (Values) Syntaxe hodnot přiřaditelných k jednotlivým vlastnostem a jejich jednotky. Working Draft
Kaskáda a dědičnost (Cascading and inheritance) Popis principů kaskády a dědičnosti, které ovlivňují přiřazování hodnot jednotlivým vlastnostem. Working Draft
Box model (Box model) Dokument popisující normální tok textu. Working Draft
Pozicování (Positioning) Možnosti vyjmutí textu z normálního toku a jeho absolutní nebo relativní pozicování.
Barvy (Color) Vlastnosti spojené s nastavováním barev elementů. Candidate Recommendation
Pozadí a okraje (Backgrounds and borders) Specifikace vlastností ovlivňujících styl a barvu okrajů a pozadí elementů. Working Draft
Řádkový modul (Line) Popis uspořádání textu a dalších boxů v rámci jednotlivých řádků. Working Draft
Text (Text) Množina vlastností ovlivňujících samotný text jako zarovnávání nebo podtržení. Candidate Recommendation
Ruby (Ruby) Definice možností umístění „ruby“, což je malá anotace u slov, používaná především v čínštině a japonštině. Candidate Recommendation
Fonty (Fonts) Souhrn vlastností pro výběr fontů a jejich dekoraci. Working Draft
Webové fonty (Web Fonts) Možnosti popisu cizích fontů a jejich přidávání do dokumentu a stahování z dané adresy. Working Draft
Generovaný obsah (Generated) Způsoby, jak z CSS vložit obsah před, za a do elementu. Working Draft
Seznamy (Lists) Vlastnosti pro formátování seznamů. Working Draft
Stránková média (Paged) Možnosti formátování dokumentů pro stránková média (tiskárny a podobně). Candidate Recommendation
Uživatelské rozhraní (UI) Vlastnosti použitelné pro interaktivní a dynamické části stránek a způsob, jak přejímat barvy a styly z uživatelského rozhraní operačního systému. Candidate Recommendation
Tabulky (Tables) Možnosti formátování tabulek (tento modul by měl shodný s možnostmi CSS2).
Sloupce (Columns) Nové vlastnosti pro sloupcové rozvržení obsahu. Working Draft
Matematika (Math) Vlastnosti pro stylování matematických zápisů psaných v jazyce MathML.
Řeč (Speech) Vlastnosti specifikující jak je dokument čten pomocí hlasové čtečky. Working Draft
Audio (Audio) Multimediální vlastnosti umožňující přiřazovat zvuk elementům a stavům dokumentu.
Média (Media, Media2) Možnosti, jak přesněji rozlišovat druhy médií, na které jsou aplikovány různé styly. Candidate Recommendation
Objektový model CSS (CSS-OM) Specifikace funkcí pro přístup k CSS3 dokumentům z objektově orientovaných jazyků.
Editovací objektový model CSS (CSS-EOM) Doplněk CSS-OM specifikující funkce a datové struktury určené pro dynamické CSS editory.
Hyperlinky (Hyperlinks) Definice formátovacích možností odkazů. Working Draft
Prezentace (Presentation) Definuje každému elementu tři prezentační stavy (úrovně) a přikazuje prohlížeči zprostředkovat uživateli způsob, jak tyto úrovně měnit pro celý dokument.
Atribut style (Style attr) Syntaxe kaskádových stylů zapsaná v XHTML atributu style. Working Draft
Čtečky (Reader) Čtečka jako typ média a na ni aplikovatelné vlastnosti. Working Draft
Gramatika (Grammar) Dodatek k CSS3 definující přesnou gramatiku této verze stylů postavenou na obecné syntaxi definované v jiném modulu.
Pokročilé rozvržení (Advanced Layout) Ukázky pokročilého rozvržení stránky pomocí vlastností CSS3.

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:

Selektor Význam
E:last-child element E, který je posledním dítětem svého rodiče
E:first-of-type element E, který je prvním sourozencem svého typu
E:last-of-type element E, který je posledním sourozencem svého typu
E:nth-child(n) element E, který je n-tým dítětem svého rodiče
E:nth-last-child(n) element E, který je n-tým dítětem svého rodiče, počítáno odzadu
E:nth-of-type(n) element E, který je n-tým sourozencem svého typu
E:nth-last-of-type(n) element E, který je n-tým sourozencem svého typu, počítáno odzadu
E:only-child element E, který je jediným dítětem svého rodiče
E:only-of-type element E, který je jediným sourozencem svého typu

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.

Předchozí článek zeleznymuz.cz
Štítky: Články

Mohlo by vás také zajímat

Nejnovější

1 komentář

  1. daewoo

    Led 3, 2010 v 18:16

    Tak už je rok 2010 a s podporou CSS 3 to je stále nevalné. Nejen, že vlastní doporučení není ještě hotové, ale situace u MSIE je pořád žalostná. Naštěstí se jeho podíl rapidně zmenšil, přibylo prohlížečů podporujících další kousky CSS 3, situace se pomalu zlepšuje. Bude však dlouho trvat (hádám tak cca 5-10 let), než bude podpora kompletní.

    Odpovědět

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *