Co jsou to kaskádové styly
Kaskádové styly v zásadě slouží k oddělenému formátování masky (formátování) a obsahu webové prezentace. Navíc umožňovaly základní formátování stavů prvků, např. po najetí myši (:hover) nebo při výběru elementu (:focus). Nové CSS3 dramaticky rozšiřuje možnosti formátování běžných definic:
- vícečetná pozadí,
- barevné přechody,
- nové vlastnosti čar,
- ale i animace, 2D a 3D transformace,
- stíny bloků i textu atd.
V neposlední řadě přináší i možnosti formátování stavů elementů a celkové zefektivnění formátovánípomocí sad selektorů. Díky vhodnému použití lze HTML i CSS kód výrazně zjednodušit a zobecnit. Také se otevírá více možností ovládání vzhledu v závislostech na uspořádání obsahu a dokonce i přesnější specifikaci výstupního zařízení.
Možnosti použití CSS3 v současnosti
Protože se specifikace CSS3 skládá z mnoha modulů a je velmi rozsáhlá, je do prohlížečů implementována postupně. Mnoho modulů stále není plně nebo korektně implementováno ani v nejnovějších prohlížečích a proto se při konstrukci vzhledu opíráme o gracefull degradation (pozvolné degradování), která zajišťuje funkčnosti a optimální vzhled ve většině prohlížečů a jejich starších verzí. Například v nižších verzích Internet exploreru se nebudou zobrazovat zaoblené rohy a stíny.
Jak už jsem předeslal, různé verze prohlížečů různě přidávaly podporu nové funkce CSS3. Často se jednalo o experimentální nasazení nekorespondující se specifikaci W3C. Takto implementované vlastnosti byly dostupné pod tzv. vendor prefixy (-moz pro Firefix, -webkit pro Chrome a Safari) a často se měnila i forma zápisu. Jakmile byla implementace vlastností plně integrována, nebylo již zapotřebí prefixy používat. Při konstrukci stylopisu je tedy nutné nejprve definovat vlastnost s vendor prefixem (pokud je ještě potřebná) a nakonec provést zápis dle W3C.
Definice pozadí s přechodem z bílé do modré, dle W3C
background: linear-gradient(top, #ffffff 0%, #0000ff 100%); /* W3C */
Plný zápis zohledňujíící verze prohlížečů
background: #ffffff; /* staré prohlížeče zobrazí plnou barvu */
background: -moz-linear-gradient(top, #ffffff 0%, #0000ff 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#0000ff)); /* Chrome, Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#0000ff 100%); /* Chrome10+, Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#0000ff 100%); /* Opera11,10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#0000ff 100%); /* IE10+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#0000ff 100%); /* W3C */
V komerčním využití nám potom stačí aplikovat jen stylopis pro poslední verze prohlížečů:
background: #ffffff; /* staré prohlížeče zobrazí plnou barvu */
background: -moz-linear-gradient(top, #ffffff 0%, #0000ff 100%); /* FF3.6+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#0000ff 100%); /* Chrome10+, Safari5.1+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#0000ff',GradientType=0 ); /* IE6-9 */
background: linear-gradient(top, #ffffff 0%,#0000ff 100%); /* W3C */
Jistě namítnete, že je nepraktické mít stejnou vlastnost popsanou pro každý prohlížeč samostatně, že se zvětšuje velikost souborů apod. Samozřejmě máte pravdu. Tento nedostatek je kompenzován značnou modularitou a možnostmi rychlé změny na jednom místě. V neposlední řadě se snižuje i počet požadavků na server (nemusíme načítat obrázky na pozadí pro různé stavy). Pro ještě vyšší optimalizace soubory stylů slučujeme a komprimujeme přímo na úrovni protokolu.
Příklad nade vše
Formuláře nám nejsnáze umožní demonstrovat výhodnost CSS 3. Snadno vytvoříme kompaktní formátování dynamicky se měnící podle HTML, včetně informačních a chybových stavů.
- Nemusí se zatěžovat definování tříd pro každý typ prvku. Přímo na úrovni CSS jsme schopni rozlišit typ formulářového pole a ten formátovat.
input[type="text"]
- Můžeme formátovat elementy podle jejich atributů vložených v HTML.
input[size="80"]
- Můžeme formátovat i dynamický obsah v závislosti na pořadí a kombinacích elementů v kódu.
input[type="text"] + input[type="button"]
- Můžeme jednoduše nastavit zaoblení rohů, barvy a styly čáry, nastavit více čar okolo a uvnitř elementu, použít barevné přechody na pozadí prvku, nastavit stíny elementu i textu uvnitř.
- Můžeme libovolně nastavit decentní formátování různých stavů elementů pomocí animací. Např. při najetí myši nad prvek se postupně obrazí stínek kolem elementu. Při kliknutí do pole se změní barva čáry apod.
input[type="text"]:focus
label:hover + input[type="text"].error
Jednoduchý formulář v CSS3 zohledňujídí stavy polí
![Opište kód z obrázku]()
/* základní stav popisku formulářového pole */
.forms label {
width: 118px;
margin: 0 24px .3em 8px;
padding-top: 1px;
float: left;
color: #888;
cursor: pointer;
position: relative;
text-align: right;
}
/* při najetí na popisek */
.forms label:hover {
color:#476791;
}
/* označení popisku povinné položky */
.forms label.required {
color: #347384;
font-weight: bold;
}
/* vygenerování hvězdičky u popisku povinného pole */
.forms label.required:after {
content: "*";
position: absolute;
top: 0.25em;
right: -14px;
color: #693675;
font-size: 100%;
font-family: Verdana;
line-height: 100%;
}
/* formátování povinného pole (pokud nemáme přímo na poli nastavenou třídu) */
.forms label.required + input {
outline-color: #98b8c1;
}
/* obrázek ve formuláři */
.forms img {
padding: 1px;
background: #fff;
outline: solid #bbb 1px;
float: left;
margin-right: 8px;
}
/* obecné nastavení všech vstupních polí typu input */
.forms input {
float: left;
margin: 0 15px 1em 0;
padding: 2px 6px 2px;
border: 0;
}
/* doplnění definice pole typu input pro textový vstup */
.forms input[type="text"] {
width: 207px;
border-top: solid #fff 1px;
color: #555;
background: #fff;
outline: solid #bbb 1px;
background: -moz-linear-gradient(top, #f3f3f3 0%, #ffffff 40%);
background: -webkit-linear-gradient(top, #f3f3f3 0%,#ffffff 40%);
background: -ms-linear-gradient(top, #f3f3f3 0%,#ffffff 40%);
background: linear-gradient(top, #f3f3f3 0%,#ffffff 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#f3f3f3", endColorstr="#ffffff",GradientType=0 );
}
/* při najetí kurzoru přes input, při najetí kurzoru na label se naformátule input */
.forms input:hover,
.forms label:hover + input {
outline-color: #98b8c1;
}
/* aktivní stav pole typu input (klinutí do pole) */
.forms input:focus {
outline-color: #98b8c1;
background: #fff;
background: -moz-linear-gradient(top, #e6f9ff 0%, #ffffff 40%);
background: -webkit-linear-gradient(top, #e6f9ff 0%,#ffffff 40%);
background: -ms-linear-gradient(top, #e6f9ff 0%,#ffffff 40%);
background: linear-gradient(top, #e6f9ff 0%,#ffffff 40%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#e6f9ff", endColorstr="#ffffff",GradientType=0 );
}
/* základní formátování potvrzovacího tlašítka */
.forms input[type="submit"] {
display: block;
float: left;
width: auto;
min-width: 120px;
padding: 3px 20px;
border: solid #55838f 1px;
border-right-color: #55838f;
border-bottom-color: #55838f;
color: #f0f0f0;
font-weight: bold;
font-size: 100%;
line-height: 100%;
clear: none;
cursor: pointer;
outline: 0;
box-shadow: inset 0 0 35px rgba(0,0,0,0), inset 0 0 1px #fff;
background: #589fb2;
background: -moz-linear-gradient(top, #589fb2 0%, #467b89 100%);
background: -webkit-linear-gradient(top, #589fb2 0%,#467b89 100%);
background: -ms-linear-gradient(top, #589fb2 0%,#467b89 100%);
background: linear-gradient(top, #589fb2 0%,#467b89 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#589fb2", endColorstr="#467b89",GradientType=0 );
}
/* potvrzovací tlačítko po najetí kurzoru */
.forms input[type="submit"]:hover {
box-shadow: inset 0 0 35px rgba(0,0,0,.3), inset 0 0 1px #fff;
background: #589fb2;
background: -moz-linear-gradient(top, #589fb2 0%, #467b89 100%);
background: -webkit-linear-gradient(top, #589fb2 0%,#467b89 100%);
background: -ms-linear-gradient(top, #589fb2 0%,#467b89 100%);
background: linear-gradient(top, #589fb2 0%,#467b89 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#4c8999", endColorstr="#3b6873",GradientType=0 );
}
/* odsazení zleva */
.forms input + input[type="submit"] {
margin-left: 150px;
}
/* vstupní pole antispamové kontroly */
.forms #antispam {
width: 174px;
padding-top: 4px;
padding-bottom: 5px;
padding-left: 1px;
text-align: center;
letter-spacing: 5px;
font-weight: bolder;
font-size: 130%;
line-height: 100%;
}
Obdobně se formátují i chybové stavy pomocí třídy „error“ a další typy formulářových polí. Právě pomocí rozlišení vzájemné pozice elementů, typů polí a možnost odlišit stejný typ pole jen podle jeho atributů dává prakticky neomezené možnost zobrazení. Zde se v plné síle projevuje čisté oddělení formy od obsahu.
Jednoduchý formulář v CSS2
![Opište kód z obrázku]()
Pro formátování do mřížky se používaly tabulky, které po stránce HTML zabíraly mnoho kódu a svou podstatou neumožňovaly dynamicky měnit vzhled a uspořádání prvků. Například nebylo myslitelné použít jeden zdrojový kód pro zobrazení na plnou šíři obsahu stránek a v zúženém prostou (jako doplňková funkce). Mezi omezení patří nemožnost tvorby přechodů nebo zaoblených rohů, které se musely připravovat v grafickém editoru (umístění jako pozadí) a to pro každé velikosti polí a jejich stavy (:hover, :focus, .error). Navíc pro vlastní změnu stavu bylo nutné použít JavaScript. Neefektivita starého řešení spočívá nejen v nutnosti kreslení, ale i při vlastním zobrazování stránek, kdy je zapotřebí všechny obrázky načíst.
Závěrem
Kaskádové styly třetí generace jsou velmi mocným a komplexním nástrojem pro formátování webových prezentací a aplikací. I přes omezenou podporu v prohlížečích (pochopitelně konzervativní IE) jsou již dnes velmi užitečným pomocníkem. Celkově zjednodušují tvorbu webu a poskytují větší variabilitu a volnost. S postupující stabilizací vývoje i my více využíváme síly CSS 3 a jsme tím schopni klientům dodávat stále vyšší kvalitu, nižší servisní časy a lepší uživatelský zážitek. Nezanedbatelnou výhodou je otevřenost pro další vývoj, zejména v oblasti mobilních aplikací, která v poslední době prudce akceleruje.
