Jak z CSS vymáčknout maximum

Prezentace pro Seminář webdesignu FI MU 2011. O tom, jak si zjednodušit život a překonat nástrahy, které na nás CSS a také CSS3 chystá.

Transcript

1. jak z css vymáčknout maximum
2. PV219 Seminář webdesignu 4/2011, Honza Javorek http://blog.javorek.net http://www.linkedin.com/in/honzajavorek mail: honza@javorek.net twitter: @littlemaple
3. V oboru 8 let, profesionálně od roku 2007. www.javorek.net
5. o čem to bude
6. 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).
7. 1) css
8. “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?
9. 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!
10. 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, ...)
11. SAD?
12. CSS3 SAVIOUR OF THE UNIVERSE
13. 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
14. 2) maximum z css3
15. 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čí.
17. 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/
19. 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 */
20. SAD?
21. 3) řešení
22. Když nám práci neusnadní W3C, usnadníme si ji sami! Lepší CSS s jinou syntaxí Obyčejné CSS DEVELOPMENT PRODUCTION
23. 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) ...
26. 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, ...)
30. 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 //  ...
31. 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/
34. CAT FIGHT
35. 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.
36. FOR THE WIN!
37. díky a čau!