Proč kaskádové styly vznikly
Když ještě kaskádové styly neexistovaly, obsah stránky se formátoval pomocí HTML elementů. Například existovala značka <font>, která nastavovala barvu a velikost písma. Zpočátku také nebylo možné stránku nijak složitěji naformátovat, například vícesloupcový layout tehdy nešlo vytvořit jinak, než pomocí různě do sebe zanořených tabulek.
Naproti tomu, jsou-li kaskádové styly správně používány, umožňují naprosté oddělení vzhledu dokumentu od jeho obsahu (včetně tzv. beztabulkových layoutů, které už jsou mnoho let standardem). Toto oddělení obou vrstev (prezentační a strukturální) zvyšuje přístupnost webu a zlepšuje jeho použitelnost na různě velkých displejích mobilních zařízení či třeba lepší audio výstupy na slepeckých čtečkách.
Další výhody kaskádových stylů proti používání samotného HTML:
- větší možnosti formátování
- snazší správa větších prezentací (CSS šablony)
- rychlejší načítání stránky
- menší zatížení serveru
Syntaxe – jak kaskádové styly fungují
Není to žádná velká magie. Kaskádové styly jsou vlastně sadou určitých vlastností a jejich hodnot, zapsaných jako text:
color: red
Na příkladu vidíte vlastnost color a jí přiřazenou hodnotu red. Hodnota se od vlastnosti odděluje dvojtečkou. Daný prvek tedy bude mít text obarvený červeně. Pokud by za sebou následovaly dvě vlastnosti, oddělili bychom je od sebe středníkem. Písmo prvku s těmito kaskádovými styly tedy bude červené a tučné:
color: red;
font-weight: bold
Kompletní seznam CSS vlastností najdete třeba na webu Mozilla.org.
E-book za mail
Získejte podrobný návod Jak na e-mail marketing (52 stran). Více informací.
Žádný spam, jen užitečný obsah. Newsletter posílám cca 8× ročně. Odhlásíte se kdykoliv.
Typy CSS podle připojení k HTML dokumentu
Inline styly (inline style sheets)
Inline CSS jsou kaskádové styly přímo zapsané v atributu style. Například následující kód obarví daný podnadpis načerveno:
<h2 style="color: red">Červený nadpis</h2>
Takové řešení má však několik nevýhod. Za prvé nejde o skutečné oddělení formy od obsahu popsané výše, protože vše se stále míchá v podobě špagetového kódu. A za druhé, tento zápis je třeba přidat ke každému prvku, takže hodně narůstá objem kódu a snižuje se rychlost načítání webu.
Proto se inline styly při kódování běžných webů používají jen výjimečně. Hodí se však třeba k rychlému označení prvků, jehož podobu si chcete zkontrolovat v prohlížeči. A nenahraditelné jsou inline CSS při kódování newsletterů (protože starší verze Outlooku a některé freemaily odřezávají hlavičky mailů, takže se styly zapsané jinak než inline vůbec neaplikují).
Interní styly (embedded style sheets)
Kaskádové styly mohou být také zapsány hromadně v hlavičce dokumentu v elementu <style> a aplikují se tak na všechny odpovídající elementy na dané stránce:
<style>
h2 {
color: red;
}
</style>
To už je lepší řešení. Vidíte, že dané pravidlo se použije na všechny nadpisy druhé úrovně <h2>. Přesto je zde ještě jedna muška – s každou načtenou stránkou načítáme kaskádové styly znovu. A pokud chceme změnit styl nějakého prvku na webu, musíme upravit CSS v HTML kódu všech stránek.
Externí styly (external style sheets)
V tomto případě výše uvedenou definici, původně zapsanou mezi otvírací a uzavírací tag elementu <style>, vložíme do zvláštního souboru s koncovkou .css a následujícím zápisem ho pak připojíme k HTML dokumentu (vkládá se do hlavičky dokumentu, tj. mezi tagy <head> a </head>):
<link rel="stylesheet" href="styles.css>
Externí CSS soubor už se nám bude kešovat, takže ho prohlížeč stáhne jen jednou a procházení dalších stránek webu se tím značně zrychlí.
Selektory a kaskádování v CSS
Jak už jsme si řekli, pokud nepožíváme inline zápis, kde je jasné, k čemu se dané kaskádové styly vztahují, vypadá CSS v hlavičce či externím souboru zápis takto:
h2 {
color: red;
}
Oné části, jež určuje, na jaký prvek se vlastnost uplatní (v tomto případě element <h2>) se říká selektor. Za ním pak následují složené závorky, které vymezují tzv. deklaraci – samotné CSS vlastnosti, které odpovídajícím prvkům přiřazujeme.
Kaskádové styly nabízí celou řadu selektorů. Vlastnosti lze přiřazovat podle typu elementu, podle atributů (nejčastěji id či class), podle umístění elementu v hierarchickém stromu dokumentu nebo tzv. pseudotřídám (např. pseudotřída a:visited aplikuje CSS deklaraci jen na navštívené odkazy).
Uvedu několik příkladů selektorů:
p {...} /* jakýkoliv odstavec */
p#sidebox {...} /* odstavec s atributem „id“ s hodnotou „sidebox“ */
p.rounded {...} /* odstavec s atruibutem „class“ s hodnotou „rounded“ */
p[foo="bar"] {...} /* odstavec s atributem „foo“, který má hodnotu „bar“ */
p:first-child {...} /* prvni odstavec (pseudotřída) */
p div {...} /* všechny elementy typu „div“ vložené v odstavcích */
Kaskádování v CSS
Slovo kaskádové, jež mají CSS v názvu, značí jejich nejcharakterističtější vlastnost – jednotlivá pravidla se dědí k dalším prvkům, které jsou v hierarchickém stromu dokumentu zanořené níže. Neboli, vlastnost kaskáduje. Například definujeme-li textu odstavce žlutou barvu, tuto barvu zdědí i prvek, který se nachází v odstavci. To výzamně zvyšuje efektivitu kaskádových stylů.
Specifita selektorů v CSS
Může se stát, že se výše uvedené selektory budou křížit. Např. máme ve stylopisu jedno pravidlo, které říká, že všechny odstavce mají být červené a jiné pravidlo, které říká, že odstavce třídy green mají být zelené). Prohlížeč se pak u odstavce s třídou green musí rozhodnout, které CSS vlastnosti na prvek aplikuje.
A právě to řeší specificita selektorů. Jsou to pravidla, která všechny prohlížeče implementují shodně a která určují, jak se v takové situaci mají zachovat. Například že pokud je CSS pravidlo k elementu přiřazené pomocí třídy, je to důležitější, než když je přiřazené jen podle typu elementu.
Média a media queries v CSS
@media
Připojování stylů jiným než inline způsobem má ještě jednu velkou výhodu. Můžeme použít atribut media, který nám styly omezí jen na určité médium (obrazovku, tiskárnu). Funguje to tedy jako určitý filtr. Díky němu je velmi jednoduché vytvořit odlišné kaskádové styly pro zobrazení na monitoru a pro tiskovou verzi webu:
<link rel="stylesheet" href="screen.css media="screen">
<link rel="stylesheet" href="print.css media="print">
Tato média lze také zapisovat přímo do CSS souboru (všechny odstavce budou vytištěny velikostí 13 typografických bodů):
@media print {
p {
font-size: 13pt;
}
}
Media queries
Media queries fungují podobně jako výše ukázané omezení CSS pravidel na tisk, jen v tomto případě se aplikují až od určité šířky displeje. Toho se využívá zejména při tvorbě responzivního designu webu. Šířce (v tomto případě 400 pixelů), při které se design webu začne chovat jinak, tj. když se aplikuje jiná verze stylů, říkají vývojáři breakpoint.
@media only screen and (min-width: 400px) {
p {
font-size: 15pt;
}
}
Mezery a odstavce v CSS
Na mezerách a odsazeních u kaskádových stylů nezáleží, klidně bychom je mohli vypustit a vše by fungovalo stejně. Postupně se ustálilo pravidlo, že pokud nejde o inline zápis, každá vlastnost se zapisuje na nový řádek a odsazuje se zleva (zvyšuje to čitelnost kaskádových stylů).
CSS preprocesory
Dnes už se většinou kaskádové styly nepíší ručně, ale kodéři využívají tzv. preprocesory, které z vytvořené šablony CSS soubory vygenerují. Vývojářům to umožňuje používat různé pokročilé funkce, které zatím kaskádové styly nepodporují, jako jsou třeba proměnné, importy více souborů do jediného atd.
Peprocesory také při každém uložení souboru kontrolují validitu CSS, takže vývojáři nemusí na kaskádové styly používat validátory.
CSS frameworky
Aby vývojáři nemuseli psát všechny kaskádové styly webu pokaždé znovu, postupně vznikly tzv. CSS frameworky. Jsou to vlastně knihovny kaskádových stylů a k nim přiřazených kousků skriptů v jazyce JavaScript, které umožňují rychle vytvořit responzivní web a doplnit k němu různé pokročilé funkce, jako jsou menu, záložky, tlačítka, tabulky atd. Použití vhodného CSS frameworku tak může kódování frontendu webu hodně zlevnit.
Nevýhodou CSS frameworků je značná datová velikost stahovaných souborů, což web trochu zpomaluje. Weby nakódované ručně také lépe fungují na mobilních zařízeních, protože kodéři si mohou libovolně nastavovat breakpointy jednotlivých prvků webu a nemusí se řídit globálními breakpointy pro celou stránku, které daný framework podporuje.
Nejznámějšími CSS frameworky jsou Bootstrap a Foundation.
Stručná historie kaskádových stylů
- Vznik kaskádových stylů se datuje k roku 1996, kdy vytvoření verze CSS 1 iniciovala organizace W3C.
- 28. 5. 1998 vydala organizace W3C finální doporučení k CSS 2.0.
- V roce 2000 konečně implementovala většina prohlížečů většinu specifikace CSS 1, byť podpora některých vlastností stále chyběla. Zároveň už prohlížeče začaly podporovat některé vlastnosti CSS 2.
- 7. června 2011 byla dokončena specifikace CSS 2.1, která opravovala některé chyby dvojky a rozšiřovala ji o další užitečné vlastnosti, které prohlížeče mezitím implementovaly samovolně.
- Specifikace CSS 3 byla rozložena do více nezávislých modulů, z nichž už se dnes většina používá v praxi.