1) Něco málo o CSS a proč jsme z něj smutní. 2) Co přináší CSS3, proč neřeší naše problémy a naopak některé v současnosti přidává. 3) Jak to celé řešit (CSS preprocesory).
“CSS is a FPS video game developed by Valve Corporation. It is a complete remake of Counter-Strike using the Source game engine.” (zdroj: Wikipedia) CSS vzniklo před 14 lety (to mi bylo devět) . Zásadně se však nezměnilo. Skvělé natolik, že nepotřebuje inovaci?
CSS1 (1996): fonty, barvy, pozadí, text, zarovnání, margin/padding, pozicování, selektory CSS2 (1998): absolutní/relativní pozicování, z-index, media types, nové selektory, několik dalších vylepšení W3C již neudržuje spec. CSS2, ale CSS2.1 dodnes nemá status Recommendation!
Chybí efekty, které se na webu zabydlely a jejich podpora v CSS by usnadnila práci. (Vlastní fonty, kulaté rohy, přechody, animace, sloupce, řešení layoutu, lepší typografie, …) Styly jsou komplexnější, údržba je obtížnější a připomíná otrockou činnost. (Proměnné, dědičnost, vnořování definic, ...)
CSS3: další selektory, namespaces, barvy (průhlednost), media, stíny, obrysy, kulaté rohy, sofistikovaná pozadí, sloupce, ... K CSS3 vzhlížíme jako ke spasiteli, ale bohužel mezi námi ještě stále není a dlouho nebude. Neřeší také všechny problémy CSS. http://css3please.com http://www.css3.info
Experimentální funkce prohlížečů jsou po dohodě s tzv. vendor prefixes. -o- Opera -ms- Internet Explorer -moz- Gecko (Firefox, ...) -webkit- Webkit (Safari, Chrome) -khtml- Konqueror To je celkem rozumné, protože to nedělá guláš v implementacích. Nikdo nezaručuje, že se prefixovaná vlastnost nezmění a její použití je zcela na vlastní nebezpečí.
Spousta věcí z CSS3 již funguje pod vendor prefixy. Můžeme je použít, pokud budou hrát roli přidaného uživatelského prožitku, ale neovlivní funkčnost. Graceful degradation: “Poskytnout alternativní verzi funkcionality nebo upozornit uživatele na možné problémy a zajistit tak použitelnost produktu v různých prostředích.” Progressive enhancement: “Začít se základní funkcionalitou a poté krok po kroku zlepšovat uživatelský prožitek s tím, že před aplikací daného vylepšení nejprve otestujeme jeho podporu.” Jan Sládek: Graceful degradation vs. progressive enhancement http://zdrojak.cz/clanky/graceful-degradation-vs-progressive-enhancement/
Použít střípky CSS3 tedy opravdu můžeme už dnes! A je to tak jednoduché! Ukažme si například, jak nastavíme barevný přechod jako pozadí: background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */ background-image: -ms-linear-gradient(top, #444444, #999999); /* IE10 */ background-image: -o-linear-gradient(top, #444444, #999999); /* Opera 11.10+ */ background-image: -webkit-gradient(linear, left top, left bottom, from(#444444), to(#999999)); /* Saf4+, Chrome */ background-image: -webkit-linear-gradient(top, #444444, #999999); /* Chrome 10+, Saf5.1+ */ background-image: linear-gradient(top, #444444, #999999); filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#444444', EndColorStr='#999999'); /* IE6–IE9 */
Nemusíme psát vlastní překladač (resp. interpret). Spousta lidí to už udělala za nás. LESS: http://lesscss.org/ (JavaScript) Sass/Scss: http://sass-lang.com/ (Ruby) Stylus: http://learnboost.github.com/stylus/ (JavaScript) CleverCSS: http://sandbox.pocoo.org/clevercss/ (Python) ...
Kdy překládat do CSS? Přímo na produkčním prostředí (JavaScript): Co když návštěvník nemá zapnutý JavaScript? Co když dojde k chybě? Pomocí jazyka, v němž děláme web (PHP, Ruby, Python, …): Existuje překladač pro náš jazyk? Je kvalitní (lessphp)? Jak jej zakomponovat do projektu? Cachovat výsledek? Pomocí externího nástroje pro CLI, který používáme ručně, nebo využijeme hooků na nástroje, které už máme: Ideální, ale vyžaduje instalaci nástroje (Node.js, Ruby, ...)
Co to umí? Proměnné Vnořování definic Mixins (znovupoužitelnost kusů definic) Dědičnost od jiných selektorů Funkce, výrazy, jednoduché počty Jednořádkové komentáře // ...
CSS3 Existují předpřipravené balíky mixinů aj. kousků znovupoužitelného kódu, jež nám usnadňují práci a to především s experimentálními vlastnostmi CSS3. LESS: http://markdotto.com/bootstrap/ Sass/Scss: http://compass-style.org/
LESS, Alexis Sellier Vytvořen jako alternativa Sass, která má CSS syntaxi (2010). Původně v Ruby, potom ale už pouze jako JavaScript. Lze použít přímo na webu nebo jako nástroj v CLI (Node.js). Není tolik používaný, i když v ČR je, zdá se, poměrně oblíbený. Méně nástrojů, Bootstrap.less. Sass, H. Catlin & N. Weizenbaum Úkol: zjednodušit a rozšířit CSS (2007). Původně nezvyklá syntaxe vycházející z HAML (Saas), později v reakci na LESS vznikla i klasická (Scss). Implementace v Ruby, poměrně snadná instalace. Komplexnější, robustnější, větší komunita, odladěné, spousta nástrojů, Compass.
honzajavorek
ganota
motok1
aiji42
wadayusuke
ybrliiu
regonn
doradora09
jkebertz
miura55
carta_engineering
tarao
masashi_sutou
bluesmoon
philhawksworth
moore
chriscoyier
sferik
lauravandoore
lara
colly
danielanewman
phodgson
hannesfritz