Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Honza Javorek

May 19, 2012
Tweet

More Decks by Honza Javorek

Other Decks in Technology

Transcript

  1. jak z css vymáčknout
    maximum

    View full-size slide

  2. PV219 Seminář webdesignu
    4/2011, Honza Javorek
    http://blog.javorek.net
    http://www.linkedin.com/in/honzajavorek
    mail: [email protected]
    twitter: @littlemaple

    View full-size slide

  3. V oboru 8 let, profesionálně od roku 2007.
    www.javorek.net

    View full-size slide

  4. o čem to bude

    View full-size slide

  5. 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).

    View full-size slide

  6. “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?

    View full-size slide

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

    View full-size slide

  8. 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, ...)

    View full-size slide

  9. CSS3
    SAVIOUR OF THE UNIVERSE

    View full-size slide

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

    View full-size slide

  11. 2)
    maximum z css3

    View full-size slide

  12. 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čí.

    View full-size slide

  13. 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/

    View full-size slide

  14. 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 */

    View full-size slide

  15. Když nám práci neusnadní W3C, usnadníme
    si ji sami!
    Lepší CSS s
    jinou syntaxí
    Obyčejné
    CSS
    DEVELOPMENT PRODUCTION

    View full-size slide

  16. 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)
    ...

    View full-size slide

  17. 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, ...)

    View full-size slide

  18. 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 //

    ...

    View full-size slide

  19. 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/

    View full-size slide

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

    View full-size slide

  21. FOR THE WIN!

    View full-size slide

  22. díky a čau!

    View full-size slide