Je zde opět úterý, a to znamená, že navážeme na seriál Webdesignérův průvodce po… Tentokrát bude tou technologií, po jejímž zákoutí se společně projdeme, CSS3. Logicky to patří k sobě a CSS3 samotné bývá (nepřesně) zahrnováno do „rodiny HTML5“

Vývoj CSS3 – modularita

Jak vyvíjíme webové stránky, tak neustále přicházíme na nové a nové věci, které by mohly být snazší. A když něco začne napadat hodně lidí, tvůrci prohlížečů by to něco často rádi implementovali a je tedy potřeba to něco specifikovat. Jinak by vznikl chaos, kdy by si každý dělal věci, jak by chtěl. Pokud bychom ovšem neustále aktualizovali jednu obrovskou specifikaci, tak by se v tom také brzy nikdo nevyznal.

CSS3 proto zavádí moduly. Modul je prostě část specifikace, která řeší jednu věc. K modulu se ve W3C přistupuje jednotlivě a může být dokončen a implementován jako samostatný prvek. Proto, ač dokončení samotného CSS3 je zatím v nedohlednu (vždyť ještě nemáme dokončeno ani CSS 2.1), prohlížeče již mnoho věcí z CSS3 podporují.

Podpora CSS3

CSS3 některé věci výrazně zjednodušuje. Například kulaté rohy, přechody, stíny a mnohé další věci. Zavádí také věci, které byly dříve doménou JavaScriptu, jako jsou animace, či konečně řeší chybějící podporu pro tvorbu layoutu v CSS.

Moduly, které již byly dokončeny a implementovány, zahrnují SVG (Scalable Vector Graphics), Media Queries nebo Namespaces. Na mnoha dalších se intenzivně pracuje a jejich dokončení se blíží. Stále jsme však minimálně rok, dva od data, kdy budou tyto věci podporované ve většina majoritních prohlížečů.

Pěkný a aktualizovaný přehled toho, co který prohlížeč podporuje, naleznete na FindMeByIP.com. Jak je na tom váš prohlížeč si můžete ověřit v našem nástroji pro detekci podpory nových technologií – použitá knihovna Modernizr detekuje i podporu CSS3 technologií.

Jak tohle tvůrci prohlížečů implementují

Převážná většina modulů se stále mění a pokud by tvůrci prohlížečů jen tak věci implementovali, měli bychom mnoho různých implementací stejné věci (a tím už jsme si prošli). Tvůrci prohlížečů proto používají něco, co se jmenuje vendor prefixes. Jedná se o jednoduchý prefix určité CSS vlastnosti, který de facto říká vývojáři, že tato věc je ve vývoji a její implementace se může změnit.

Někteří lidé říkají, že právě proto je nebezpečné je používat, valná většina designérů je však radostně používá a užívá si výhod, které přinášejí.

Tvůrců prohlížečů pochopitelně plánují, že vendor prefixy budou od vlastností postupně odstraňovat. Například Apple to již v Safari 4 u některých věcí udělal.

A jaké mají jednotlivé prohlížeče prefixy?

• -moz- (Mozilla, potažmo celé jádro Gecko)
• -webkit- (Safari, Google Chrome a další prohlížeče na jádře Webkit)
• -o- (Opera)
• -ms- (IE9)

Mohu to používat již zítra v práci?

Určitě! Jen byste se měli sžít s jedním z termínů Progressive Enhancement či Graceful Degradation. (Více o těchto pojmech a o postupech, které představují, čtěte v článku Graceful Degradation vs Progressive Enhancement zde na Zdrojáku.) CSS3 je naprosto zpětně kompatibilní, prohlížeče věci, které neznají, jednoduše ignorují. A s tím se dá výborně pracovat.

Využíváním nových věcí můžete nadchnout uživatele mobilních prohlížečů či nabídnout úžasné věci lidem, kteří mají nejnovější desktopové prohlížeče. Na uživatele starších prohlížečů, které používají například z příkazu v práci a nemohou s tím, chudáci, nic dělat, pochopitelně nemůžete kašlat. Inspirujte se v článku Martina Michálka, jak se rozhodnout co je skutečně důležité uživateli ukázat a co je naopak jen grafická ptákovina, do které nemusíte investovat dvě hodiny drahocenného času.

A přijďte to také probrat na fórum Zdrojáku.

Čím se budeme zabývat v tomto seriálu

CSS3 má velké množství modulů. Však se sami podívejte na jejich výčet. My se na Zdrojáku zaměříme na věci, které lze pohodlně používat již dnes a mnoho webdesignérů je také běžně používá.

Jako první si příští týden ukážeme rychlé tipy pro webdesignérovu kuchyni: kulaté rohy, přechody, stíny u textů i objektů, pozadí a barvy. Poté se podíváme na animace a transformace a ukážeme si, jak uživateli nabídnout z naší stránky úžasný vizuální zážitek. Potom přijdou media-queries a Responsive Web Design a ke konci si ukážeme, jaké nové selektory CSS3 zavádí.

Je toho mnohem víc, o čem bychom mohli v tomto seriálu psát, takže pokud vás zajímá specifická oblast, řekněte si o to v komentářích. My budeme seriál průběžně doplňovat.

Tak tedy příště na shledanou, a do té doby doporučuji vaší pozornosti článek od Erica Meyera o vendor prefixech.