Jak z CSS vymáčknout maximum

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á.

7b2e4bf7ecca28e530e1c421f0676c0b?s=128

Honza Javorek

May 19, 2012
Tweet

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

  4. None
  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čí.
  16. None
  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/
  18. None
  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) ...
  24. None
  25. None
  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, ...)
  27. None
  28. None
  29. None
  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/
  32. None
  33. None
  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!